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


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


12 Answers

New Answer


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

+21 Search sweetalerts2.github


You can create your own by using HTML and CSS Or use library like sweetalert.js


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


Beginner friendly may help you


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!


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.


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???


check this.


You can start looking for simple popup from here : Or you can directly go for advanced popup :


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>