How to open a CSS-only popup automatically on page load/using Javascript?

Question

I've created CSS-only popup which is working only by clicking on the link/button. I want to show this popup automatically on page load. Also, how this popup can be opened without clicking on the link/button ie By 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>

Thanks in advance

Answer 1

There is no need of jQuery, you can accomplish this using Vanilla Javascript. To open the popup automatically on page load, set the hash to the id of 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 generic function to open the popups:

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

Answer 2

As you are just hiding the popup using css opacity you can just use jquery on page load to show the popup or fade it in if you want to add a bit of animation.

Also its probably a good idea to set the display of the popup to none in css or you may run into problems at a later date. You could 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/

Answer 3

Just need to trigger 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>

Answer 4

 // this is the modal we will display const myModal = document.querySelector("#simpleModal") myModal.style.display = "none" // this eventlistner will display the popup on load if the required cookie is avaialable window.addEventListener('load', (event) => { myModal.style.display = "block" }); const removePopUp = () => { console.log("cancelled") myModal.style.display = "none" }

 <div> Popup <div id="simpleModal" class="modal mainCotainer" tabindex="-1" role="dialog"> <div class="modal__centered fieldsCOntainer"> <input type="email" placeholder="Enter a friends Email" /> <button>Enter</button> <button onclick="removePopUp()">Cancel</button> </div> </div>