How to create custom pop-ups in html? | SoloLearn: Learn to code for FREE!

+23

How to create custom pop-ups in html?

I want to create custom beautiful pop-ups for my code

9/20/2020 9:07:58 AM

Tracy⭐

12 Answers

New Answer

+28

🎃#H P 22™🎃 Please be reminded that downvote abuse is against our guidelines.

+21

https://code.sololearn.com/WEVFA7XzvUmK/?ref=app Search sweetalerts2.github

+13

You can create your own by using HTML and CSS Or use library like sweetalert.js https://code.sololearn.com/Wt5p4O33LVUA/?ref=app https://code.sololearn.com/WguJrVB7EUMk/?ref=app

+8

You will have to design it yourself with css. Also javascript will be needed to trigger it

+8

Beginner friendly may help you https://code.sololearn.com/We75g9TtAx4x/?ref=app

+3

In html5 there's no need to use additional tools. You may use new element named "dialog". If you want to make your web page cross-browser, then there are polyfills for this! Enjoy using that element!

+2

The easiest way to create popups is to use bootstrap, it'll save a lot of energy. CSS/JS is not necessary. Input bootstrap library ref. link in the head and add the code in body: <!-- Trigger the popup with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog">   <div class="modal-dialog">     <!-- Modal content-->     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal">&times;</button>         <h4 class="modal-title">Modal Header</h4>       </div>       <div class="modal-body">         <p>Some text in the modal.</p>       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>       </div>     </div>   </div> </div> If you need help on the boostrap library link , contact me. I hope I've been able to profer suitable solution.

+2

How to replace a scroll up button in a html website with something fancy like a super hero or a rocket that goes to the top of the website from the bottom???

+2

check this. https://code.sololearn.com/WdvSI1cN8OP9/?ref=app

0

You can start looking for simple popup from here : https://www.w3schools.com/howto/howto_js_popup.asp Or you can directly go for advanced popup : https://freshdesignweb.com/jquery-javascript-popup-window/

0

Hello, Here is full code for custom pop-up. Follow few easy steps to create your own pop-up: Step 1: Include jQuery file inside head tag <script src="jquery-1.js" type="text/javascript"></script> Step 2: Add pop-up HTML inside body tag <button class="popup">Click to open popup</button> <div style="display: none;" class="pop-outer"> <div class="pop-inner"> <button class="close">X</button> <h2>Pop-up title goes here.</h2> <p>Pop-up content goes here.</p> </div> </div> Step 3: Add CSS style inside head tag <style> .pop-outer { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .pop-inner { background-color: #fff; width: 500px; height: 300px; padding: 25px; margin: 15% auto; } </style> Step 4: Add jQuery code inside head tag <script> $(document).ready(function (){ $(".popup").click(function (){ $(".pop-outer").fadeIn("slow"); }); $(".close").click(function (){ $(".pop-outer").fadeOut("slow"); }); }); </script>