Geek Answers Handbook

How to open CSS only popup when page loading / using Javascript?

I created a CSS-only popup that only works by clicking the link / button. I want to show this popup automatically when the page loads. In addition, how this popup can be opened without clicking on the link / button, i.e. using Javascript / jQuery.

Fiddle

.modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity: 1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: #339999; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } 
 <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <p style="color:white">This is a sample modal box that can be created using the powers of CSS3.</p> </div> </div>

Thank you in advance

+5
source share
3 answers

Since you just hide the popup using css opacity, you can just use jquery when loading the page to display the popup or disappear if you want to add some animation.

It's also probably nice to set the popup to none in css, or you may run into problems at a later stage. You can do something like:

 .modalDialog { //added display none on element display:none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; //opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } $(document).ready(function() { //Use jQuery to show the popup $('.modalDialog').show(); //Alternativly use jQuery to fadeIn the popup $('.modalDialog').fadeIn() })

Final updated code: https://jsfiddle.net/q4n7p0jx/1/

0
source

No jQuery needed, you can accomplish this with Vanilla Javascript. To automatically open a popup when a page loads, set the hash to the id popup.

Demo

 function openPopup() { window.location.hash = 'openModal'; } window.onload = openPopup; 
 .modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity: 1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: #339999; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } 
 <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <p style="color:white">This is a sample modal box that can be created using the powers of CSS3.</p> </div> </div> <br /> <br /> <button onclick="openPopup()">Open popup by Javascript</button>

You can also create a general function to open pop-ups:

 function openPopup(popupId) { window.location.hash = popupId; }
+4
source

You just need to click on the link when the page loads.

 $(document).ready(function() { console.log($('a[href="#openModal"]')[0]); $('a[href="#openModal"]')[0].click(); }) 
 .modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity: 1; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: #339999; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <p style="color:white">This is a sample modal box that can be created using the powers of CSS3.</p> </div> </div>
0
source

More articles:


All Articles