+ 23

How to create custom pop-ups in html?

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

20th Sep 2020, 9:07 AM
Tracy⭐ - avatar
11 Answers
+ 29
🎃#H P 22™🎃 Please be reminded that downvote abuse is against our guidelines.
20th Sep 2020, 9:31 AM
Hatsy Rei
Hatsy Rei - avatar
20th Sep 2020, 9:11 AM
ÃKR - avatar
+ 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
20th Sep 2020, 9:11 AM
Raj Chhatrala
Raj Chhatrala - avatar
+ 8
You will have to design it yourself with css. Also javascript will be needed to trigger it
20th Sep 2020, 9:10 AM
OfcourseitsRohit - avatar
+ 8
20th Sep 2020, 9:34 AM
Atul - avatar
+ 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!
21st Sep 2020, 7:54 AM
Timur Myngbay
Timur Myngbay - avatar
+ 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.
20th Sep 2020, 1:44 PM
David Adediji
David Adediji - avatar
+ 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???
21st Sep 2020, 8:19 AM
Vivek - avatar
21st Sep 2020, 4:41 PM
Stonny - avatar
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/
25th Sep 2020, 4:21 AM
Ishan Shah
Ishan Shah - avatar
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>
29th Sep 2020, 4:29 AM
Ishan Shah
Ishan Shah - avatar