В этом уроке я хочу показать Вам как можно создать модальное всплывающее окно JQuery с задержкой по времени. Этот пример содержит задержку появления 3 секунды, но Вы можете выставить любую. Код  JQuery содержит всего 4 строчки. 

Просмотр Скачать

Структура HTML Модального окна

Структура HTML довольна проста. В данном всплывающем окне может располагаться и реклама и форма подписки. Его спокойно можно использовать на любой странице Joomla.

<div id="parent_popup">
  <div id="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
    <p>Это пример простого модального окна, всплывающего при загрузке сайта, с возможностью управления временем появления.</p>
    <p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
</div>
</div>

Структура CSS Всплывающего окна

Тени и скругление углов выполнено на CSS 3. 

 #parent_popup {
  background-color: rgba(0, 0, 0, 0.3);
  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;

/*--CSS3 Тени для Блока--*/

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

/*--CSS3 Скругленные углы--*/

-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);
} 

Ну и наконец 4 строчки кода которые необходимы для появления модального окна с задержкой по времени.

Код JQuery

<script type="text/javascript">
 $(function(){ // сработает, когда документ загрузится
    $('#parent_popup').delay(3000) // пауза в 3 сек.
                .show(2000); // появление элемента в течении 1 сек.
});
 </script>

Вот и все всплывающее окно. Надеюсь Вам пригодиться данный урок.

P.S.

Да чуть не забыл. Для того чтобы модальное окно работало необходимо подключить библиотеку JQuery.

Вот код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>