Triggering popup on load using CSS3

Question

I have looked for answer in every thread from past and I cannot find it. I have problem with triggering popup. I used some online tutorials to make popup window. I successfully made it, but only way to trigger it is on click. Like this:

<a href="#openModal">Open Modal</a> <div id="openModal" class="modalDialog">

I checked this thread but it's not working for me.

So do you want a [CSS3](http://stackoverflow.com/questions/13630229) or a jQuery solution? Could you share your code you tried in your requested language? — totymedli, Jan 09 '16 at 02:55

score 0 · Answer 1 · answered Jan 09 '16 at 03:01

So I did it by simply redirecting user to URL that is triggering popup.

HTML:

<body onload="Redirect()">

JavaScript:

   <script type="text/javascript">
    function Redirect() {
               window.location="My_url/index.html#openModal";
            }
      </script>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Hacky CSS solution

If you used the :target trick to create a CSS only trigger, than just swap the regular and the target rule, so the pop-up will render on load as everything else and the close button will hide the pop-up:

#close:target {
   display: none;
}

/*Just for style*/
#close {
    position: fixed;
    width: 100px;
    height: 100px;
    background-color: red;
}

<div id="close">
    <a href="#close">Close (X)</a>
    <p>We hate pop-ups!</p>
</div>

Standar JavaScript solution

Otherwise if you use JavaScript to execute a display code on load, then why not to do it all in JavaScript? You are already not "CSS only":

window.onload = function() {
    document.getElementById('popup').style.display = 'block';
};

document.getElementById('close').addEventListener('click', function () {
    document.getElementById('popup').style.display = 'none';
});

#popup {
    display: none;
    position: fixed;
    width: 100px;
    height: 100px;
    background-color: red;
}

<div id="popup">
    <a href="#c" id="close">Close (X)</a>
    <p>We hate pop-ups!</p>
</div>

I didn't had time to test your solution because I made it work with solution I posted earlier. But thank you very much on your time, maybe someone else will find this useful. :) — someRandomSerbianGuy, Jan 10 '16 at 00:34

Triggering popup on load using CSS3

2 Answers2

Hacky CSS solution

Standar JavaScript solution