Как сделать диалоговое окно на JavaScript

Главная Технологии

Делаем диалоговое окно, всплывающее сразу после загрузки страницы HTML Как сделать диалоговое окно, всплывающее сразу после загрузки веб страницы? Вставляем код

Делаем диалоговое окно, всплывающее сразу после загрузки страницы HTML

Как сделать диалоговое окно, всплывающее сразу после загрузки веб страницы? Все просто. В HTML код страницы вставляем код:

<div id="parent_popup">
<div id="popup">
<h1>Вы искали</h1>
<p>Здесь любой контент, который будет отображаться в диалоговом окне.</p>
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
</div>
</div>
<script type="text/javascript"> var delay_popup = 1000; setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); </script>

Первая часть кода — само окно с контентом. В качестве контента может быть что угодно: текст, видео, изображение, ява-скрипт. Вторая часть — java-скрипт для вывода диалогового окна после загрузки страницы. За время задержки отвечает параметр var delay_popup.
В примере это 1000 — 1 секунда. В файл стилей *.css (обычно это style.css) добавляем:

/* Всплывающее окно */
#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;
/*--CSS3 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: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#popup h1{font:28px Monotype Corsiva, Arial; font-weight: bold; text-align: center; color: #008000; text-shadow: 0 1px 3px rgba(0,0,0,.3);}
#popup h2{font:24px Monotype Corsiva, Arial; color: #008000; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.3);}
/* кнопка закрытия */
.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);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;}

Пример получившегося окна.
Диалоговое окно