На сайтах, блогах или в интернет магазинах можно увидеть такой эффект, когда при нажатии на кнопку или ссылку затемняется веб-страница и появляются всплывающее окно с формой обратной связи или подпиской на курсы или с корзиной товаров и др. Сегодня мы попробуем что-то подобное сделать. Буду использовать HTML+CSS+Javascript.
Итак, есть два блока (div): фон и само всплывающее окно с содержимым. Они скрыты, так как в CSS прописано свойство:
display: none;
И когда мы нажимает на кнопку или ссылку, чтобы вызвать всплывающее окно, два блока(div) появляются, так как в CSS свойство изменяется на:
display: block;
Саму суть, я думаю, вы поняли.
Вставьте в HTML файл перед </body> вот такой код:
<!--задний фон-->
<div onclick="show('none')" id="wrap"></div>
<!-- Всплывающее окно-->
<div id="window">
<!-- Крестик-->
<span class="close" onclick="show('none')">X</span>
здесь текст, картинки и т.д
</div>
<!--Кнопка-->
<button onclick="show('block')">Показать окно</button>
CSS стиль.
#wrap{
display: none;
opacity: 0.8;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
background-color: rgba(1, 1, 1, 0.725);
z-index: 100;
overflow: auto;
}
#window{
width: 400px;
height: 400px;
margin: 50px auto;
display: none;
background: #fff;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
}
.close{
margin-left: 364px;
margin-top: 4px;
cursor: pointer;
}
Сейчас блоки «wrap» и «window» находятся в скрытом состоянии:
display: none;
Чтобы блоки появились после нажатия по ссылке, добавьте Javascript код перед тегом </head> или перед тегом </body>:
<script ENGINE="text/javascript">
//Функция показа
function show(state)
{
document.getElementById('window').style.display = state;
document.getElementById('wrap').style.display = state;
}
</script>
При нажатии на кнопку «Показать окно» вызывается Javascript функция «show()» и к блокам «wrap» и «window» будет присвоено свойство 'block':
А это значит, что блоки будут в состоянии видимости.
Вот абсолютно готовый код:
<!DOCTYPE HTML>
<html>
<head>
<title>Как сделать всплывающее окно на сайте</title>
<meta charset="utf-8">
<style>
#wrap{
display: none;
opacity: 0.8;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
background-color: rgba(1, 1, 1, 0.725);
z-index: 100;
overflow: auto;
}
#window{
width: 400px;
height: 400px;
margin: 50px auto;
display: none;
background: #fff;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
}
.close{
margin-left: 364px;
margin-top: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<!--задний фон-->
<div onclick="show('none')" id="wrap"></div>
<!-- Всплывающее окно-->
<div id="window">
<!-- Крестик-->
<span class="close" onclick="show('none')">X</span>
<img class="aligncenter size-full wp-image-7815" src="/wp-content/uploads/2014/09/CoverCommander.jpg" alt="Бесплатная книга от автора блога «5 тезисов, которые помогут достичь любых целей!»" width="270" height="370">
<br><a href="/biblioteka/besplatnaya-kniga-ot-avtora-bloga-5-tezisov-kotorye-pomogut-dostich-lyubyx-celej.html/">Читать далее...</a>
</div>
<!--Кнопка-->
<button onclick="show('block')">Показать окно</button>
<script type="text/javascript">
//Функция показа
function show(state)
{
document.getElementById('window').style.display = state;
document.getElementById('wrap').style.display = state;
}
</script>
</body>
</html>
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
Скрипт для выпадающего списка
Как сделать поиск в таблице на сайте
Владелец сайта предпочел скрыть описание страницы WordPress
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222435 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187485 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559
9 Ответов на комментарий - Как сделать всплывающее окно на сайте
Добавить комментарий
Метки: css, html, javascript, Вебмастеру, для сайта, эффекты для сайта
Подскажите, пожалуйста, если нужно рядом расположить несколько картинок, которые будут служить кнопками для вызова функции, то как сократить код? Или для каждой кнопки нужно все прописывать полностью (кроме css, разумеется).
Здравствуйте, Елена! Для каждой кнопки нужно прописывать полностью новое ID в стилях, название функции.
Спасибо! Обратите внимание, что у Вас перепутан местами тег pre в первом коде – закрывающийся тег идет впереди открывающегося.
Спасибо, Евгений!
Тег pre в коде не нужен, это сам WordPress их влепил без моего согласия.
Еще раз спасибо что заметили. В коде тег pre убрал.
Добрый день!
Подскажите, как сделать чтобы на одной странице работало несколько кнопок с разной информацией. У меня все работает, но выплывающее окно всегда с информацией последней кнопки (на всех). Пробовал делать разный ID, ничего не получается
Здравствуйте, Андрей!
<style> #wrap{ display: none; opacity: 0.8; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; background-color: rgba(1, 1, 1, 0.725); z-index: 100; overflow: auto; } #window{ width: 400px; height: 400px; margin: 50px auto; display: none; background: #fff; z-index: 200; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; } #wrap2{ display: none; opacity: 0.8; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; background-color: rgba(1, 1, 1, 0.725); z-index: 100; overflow: auto; } #window2{ width: 400px; height: 400px; margin: 50px auto; display: none; background: #fff; z-index: 200; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; } .close{ margin-left: 364px; margin-top: 4px; cursor: pointer; } </style> <!--1--> <!--задний фон--> <div onclick="show('none')" id="wrap"></div> <!-- Всплывающее окно--> <div id="window"> <!-- Крестик--> <span class="close" onclick="show('none')">X</span> здесь текст, картинки и т.д </div> <!--Кнопка 1--> <button onclick="show('block')">Показать окно</button> <!--2--> <!--задний фон--> <div onclick="show('none')" id="wrap2"></div> <!-- Всплывающее окно--> <div id="window2"> <!-- Крестик--> <span class="close" onclick="show2('none')">X</span> здесь текст, картинки и т.д ----2 </div> <!--Кнопка 2--> <button onclick="show2('block')">Показать окно 2</button> <script ENGINE="text/javascript"> //Функция показа function show(state) { document.getElementById('window').style.display = state; document.getElementById('wrap').style.display = state; } function show2(state) { document.getElementById('window2').style.display = state; document.getElementById('wrap2').style.display = state; } </script>Добрый вечер. Степан!
Спасибо большое! Все работает. Нашел ошибку, пропустил сделать уникальной функцию показа.
Нет, вам нужно поменять кодировку файла.