I encountered a problem with my popup that I created using pure CSS. When I move my mouse to the top or bottom of the window, the popup disappears. However, if my cursor is in the body area, the popup appears as intended. I have not used any JavaScript in my popup code. You can see the issue here: https://i.stack.imgur.com/CPe7E.jpg. I am also trying to figure out how to open the popup at page load without using JavaScript.
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: auto;
}
/* More CSS code here */
</div>
<div class="priv_cont">
<div class="priv_head">
<p style="margin:0;padding:0;text-align:center;font-size:18px;color:#000;">
<I>By continuing to the content you agree with the <a href="#" style="color:#000;">cookie</a>
and <a href="#" style="color:#000;">privacy</a> policies.</I>
</p>
</div>
</div>Can anyone help me identify the issue and suggest ways to prevent it? I appreciate any input. Thank you in advance for your assistance.