Очень часто бывает нужно вывести пользователю какую-нибудь информацию или предложение в отдельном окне. Поскольку такая информация будет максимально легко доходить до посетителей. Однако, если использовать JavaScript для вывода обычных окон, то их будет блокировать браузер. Я решил рассказать о том, как сделать вспл...
Очень часто бывает нужно вывести пользователю какую-нибудь информацию или предложение в отдельном окне. Поскольку такая информация будет максимально легко доходить до посетителей. Однако, если использовать JavaScript для вывода обычных окон, то их будет блокировать браузер. Я решил рассказать о том, как сделать всплывающее окно с затемнением с использованием только HTML и CSS.
Я сразу приведу код, а потом немного его прокомментирую:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#parent_popup {
background: #000;
height: 100%;
opacity: 0.9;
position: fixed;
width: 100%;
z-index: 100;
top: 0;
left: 0;
}
#popup {
background-color: #00f;
height: 200px;
position: fixed;
top: 100px;
left: 40%;
color: #f00;
width: 300px;
}
</style>
</head>
<body>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<h1>Сайт</h1>
<div id="parent_popup">
<div id="popup">
<p style="cursor: pointer;">Закрыть</p>
<p>Текст в окне</p>
</div>
</div>
</body>
</html>
Во-первых, я вывел много h1 для того, чтобы показать, что когда контента много и пользователь будет проматывать вниз, окно будет идти вместе с прокруткой. В реальности, вместо h1 будет обычный контент на Вашем сайте.
Блок parent_popup занимается затемнением (background-color и opacity), а также выводится поверх всего остального контента (z-index: 100;).
А блок popup - это непосредственно само окно. Мы задаём его положение (top и left), а также делаем его fixed для того, чтобы он перемещался вместе с прокруткой страницы.
И, наконец, в коде есть текст "закрыть", кликнув по которому, окно будет закрыто. Это единственное место, где используется JavaScript.
Я могу сказать, что данное всплывающее окно с затемнением очень лёгкое в настройке и установке. Вы можете вставлять любой контент в любое место окна, а отсутствие вывода через JavaScript гарантирует, что это окно увидят все посетители.
