How to Create a Simple CSS Popup in Your Web Page
Add this code inside the head tag of your web page:
Step-by-Step Guide
-
Step 1: Add this code inside the head tag of your web page: <script src='http:</script> The above code will refer to the online library available.
If your web page is not running online, then you must download the jquery library and link it to your webpage. -
Step 2: Add the popup HTML code to your webpage.
Make sure it's above the close body tag. <body> <div> <!-- website content start
--> </div> <!-- website content ends
--> <div class="popup"> <!-- popup content start || copy this to the end of the file--> <div class="popupWindow"> <div class="popup_txt"> Are you 18 years of age or older? </div> <div class="popup_img"> <img src="yes.png" class="popup_img_yes"/> <img src="no.png" class="popup_img_no"/> </div> </div> </div> <!-- popup content ends
--> </body> All the divs are separate containers where we refer them individually by the id and class names. , <style> .popup{ position:fixed; width:100%; height:100%; left:0px; right:0px; top: 0px; bottom:0px; background-color:rgba(3,3,3,0.8); } .popupWindow{ background-color:white; margin:0px auto; width:40%; min-width:400px; min-height:300px; margin-top:12%; text-align: center;
-moz-border-radius: 50px 50px / 50px 50px; border-radius: 50px 50px / 50px 50px; box-shadow: 10px 10px 5px #000; } .popup_txt{ font-size:26px; font-weight:bold; margin:10px; padding-top:100px; color:green; } .popup_img{ maring:10px; } .popup_img_yes,.popup_img_no{ margin:20px; } </style> The CSS is applied to the div elements by referring to their id and class names.
The id is referred by #idName and class is referred by .className , All script must be written inside script tag. <script> $(document).ready(function(){ $( ".popup_img_yes" ).click(function() { $( ".popup" ).fadeOut( 1200 ); }); $( ".popup_img_no" ).click(function() { window.open("https://www.google.com"
"_self"); }); }); </script>
The jquery is used to handle the click event on the "yes" and "no" button and their corresponding action.
If yes is clicked .fadeOut( 1200 ) method is called; here the popup will fade out in
1.2 seconds.
If no is clicked the page is reloaded with the URL google.com using the function window.open.
The attribute "_self" indicate that the url is loaded in the same tab. , yes no ,, -
Step 3: Add this CSS inside the style tag.
-
Step 4: Add these jquery scripts in your webpage inside head tag.
-
Step 5: Know how it works.
-
Step 6: Find or create your own pictures for the yes and no
-
Step 7: if desired.
-
Step 8: Enter the correct path for the picture src (source).
-
Step 9: Save your file with the extension .html to your local drive and run the saved file.
Detailed Guide
If your web page is not running online, then you must download the jquery library and link it to your webpage.
Make sure it's above the close body tag. <body> <div> <!-- website content start
--> </div> <!-- website content ends
--> <div class="popup"> <!-- popup content start || copy this to the end of the file--> <div class="popupWindow"> <div class="popup_txt"> Are you 18 years of age or older? </div> <div class="popup_img"> <img src="yes.png" class="popup_img_yes"/> <img src="no.png" class="popup_img_no"/> </div> </div> </div> <!-- popup content ends
--> </body> All the divs are separate containers where we refer them individually by the id and class names. , <style> .popup{ position:fixed; width:100%; height:100%; left:0px; right:0px; top: 0px; bottom:0px; background-color:rgba(3,3,3,0.8); } .popupWindow{ background-color:white; margin:0px auto; width:40%; min-width:400px; min-height:300px; margin-top:12%; text-align: center;
-moz-border-radius: 50px 50px / 50px 50px; border-radius: 50px 50px / 50px 50px; box-shadow: 10px 10px 5px #000; } .popup_txt{ font-size:26px; font-weight:bold; margin:10px; padding-top:100px; color:green; } .popup_img{ maring:10px; } .popup_img_yes,.popup_img_no{ margin:20px; } </style> The CSS is applied to the div elements by referring to their id and class names.
The id is referred by #idName and class is referred by .className , All script must be written inside script tag. <script> $(document).ready(function(){ $( ".popup_img_yes" ).click(function() { $( ".popup" ).fadeOut( 1200 ); }); $( ".popup_img_no" ).click(function() { window.open("https://www.google.com"
"_self"); }); }); </script>
The jquery is used to handle the click event on the "yes" and "no" button and their corresponding action.
If yes is clicked .fadeOut( 1200 ) method is called; here the popup will fade out in
1.2 seconds.
If no is clicked the page is reloaded with the URL google.com using the function window.open.
The attribute "_self" indicate that the url is loaded in the same tab. , yes no ,,
About the Author
Sarah Brown
Specializes in breaking down complex organization topics into simple steps.
Rate This Guide
How helpful was this guide? Click to rate: