Script: Show Modal Popup after Time Delay

April 22, 2020

Script pop-up for the site after a specified time.

So, how can such an effect be done on a site?

Add this code after the <body> tag:

<div id="parent_popup">

<div id="popup">

Then insert the necessary html-code for the subscription of the group, or the advertising code, etc.

<a class="close" title="close" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div>

</div>

<script ENGINE="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>

Add the CSS style:

#parent_popup{

background-color: rgba(0, 0, 0, 0.8);

display: none;

position: fixed;

z-index: 99999;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

#popup{

background: #fff;

width: 520px;

margin: 10% auto;

padding: 5px 20px 13px 20px;

border: 10px solid #ddd;

position: relative;

-webkit-box-shadow: 0px 0px 20px #000;

-moz-box-shadow: 0px 0px 20px #000;

box-shadow: 0px 0px 20px #000;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

}

.close{

background-color: rgba(0, 0, 0, 0.8);

border: 2px solid #ccc;

height: 24px;

line-height: 24px;

position: absolute;

right: -24px;

cursor: pointer;

font-weight: bold;

text-align: center;

text-decoration: none;

color: rgba(255, 255, 255, 0.9);

font-size: 14px;

text-shadow: 0 -1px rgba(0, 0, 0, 0.9);

top: -24px;

width: 24px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

-ms-border-radius: 15px;

-o-border-radius: 15px;

border-radius: 15px;

-moz-box-shadow: 1px 1px 3px #000;

-webkit-box-shadow: 1px 1px 3px #000;

box-shadow: 1px 1px 3px #000;

}

.close:hover{

background-color: rgba(0, 122, 200, 0.8);

}