Как сделать всплывающее окно с затемнением
Очень часто бывает нужно вывести пользователю какую-нибудь информацию или предложение в отдельном окне. Поскольку такая информация будет максимально легко доходить до посетителей. Однако, если использовать 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;" onclick="document.getElementById('parent_popup').style.display='none';">Закрыть</p>
<p>Текст в окне</p>
</div>
</div>
</body>
</html>
Во-первых, я вывел много h1 для того, чтобы показать, что когда контента много и пользователь будет проматывать вниз, окно будет идти вместе с прокруткой. В реальности, вместо h1 будет обычный контент на Вашем сайте.
Блок parent_popup занимается затемнением (background-color и opacity), а также выводится поверх всего остального контента (z-index: 100;).
А блок popup - это непосредственно само окно. Мы задаём его положение (top и left), а также делаем его fixed для того, чтобы он перемещался вместе с прокруткой страницы.
И, наконец, в коде есть текст "закрыть", кликнув по которому, окно будет закрыто. Это единственное место, где используется JavaScript.
Я могу сказать, что данное всплывающее окно с затемнением очень лёгкое в настройке и установке. Вы можете вставлять любой контент в любое место окна, а отсутствие вывода через JavaScript гарантирует, что это окно увидят все посетители.
-
Создано 13.04.2012 13:37:53
-
Михаил Русаков
Комментарии (53):
Спасибо за урок, пригодится.
Ответить
в стиле сделал так #popup { background-color: #fff; position: relative; margin: 0 auto; height: 165px; top: 300px; padding: 40px; border-radius: 4px; color: #000; width: 500px; } так центрируется нормально нежели с left
Ответить
Здравствуйте, Михаил. В вашем примере всплывающее окно и черный фон - полупрозрачны. А вы не знаете: можно ли как-нибудь сделать так чтобы дочерний блок <div id="popup"> в отличие от родительского <div id="parent_popup"> был непрозрачным?
Ответить
Для этого надо использовать вместо opacity обычный фон у popup. Этот фон должен быть в png, и он должен быть прозрачным сам по себе.
Ответить
Спасибо.
Ответить
вместо opacity нужно сделать прозрачность для id="parent_popup" через цвет: background: rgba(0, 0, 0, 0.55);
Ответить
Михаил, Здравствуйте! Помогите пожалуйста с такой проблемой: Я пишу в HTML такой код: <div id = "header></div> После этого захожу в CSS файл и ставлю там высоту и ширину шапки, но она не хочет изменяться! Почему? Вот код CSS: div#header { background-image:url('images/header.jpg'); width: 100%; height: 50px; }
Ответить
После header кавычка не закрыта.
Ответить
добрый день, михаил. ви не подскажите как сделать всплывающее окно с прокруткой. тоесть после вызова окна если его контэнт не помещяется в область видемости браузера и при прокрутке прокручевалось само окошко а контент сайта оставался на месте?
Ответить
Добавить в css к всплывающему окну помимо фиксированных размеров, ещё и overflow:auto;
Ответить
это не поможет. стрница за окном всеровно будет прокручиваться. вот нашел пример: http://javascript.ru/forum/xhtml-html-css/22370-prokrutka-vsplyvayushhego-okna.html он рабочий. но под себя нада еще поковырять.
Ответить
Михаил, подскажи, как сделать, чтобы страница открывалась не изначально со всплывающим окном и затемненным фоном, а чтобы это окно открывалось пользователем по ссылке?
Ответить
Сделать какой-нибудь <span onclick="вызов_окна()">ссылка</span>. В функции вызов_окна() сделать parent_popup с display="block"; По умолчанию же display="none";
Ответить
Спасибо за ответ. Однако, поскольку я чайник, он мне ничего не дал ) Может, распишете подробнее? Или отдельную статью на этот счёт сделаете?
Ответить
Рекомендую изучать JavaScript, задача несложная, но написать десяток строчек придётся. Вот курс по JS: http://srs.myrusakov.ru/kurs
Ответить
Здравствуйте, Михаил. Добавил к блоку <div id="parent_popup"> обработку клика на закрытие, т.е. onclick="document.getElementById('parent_popup').style.display='none';" , но при нажатии на синее окошко (<div id="popup">) закрываются оба. Как сделать, чтобы при нажатии на синее окошко не закрывалось всё, а при нажатии все синего окошка (т.е. на затемнённый фон) закрывалось всё?
Ответить
Попробуйте так onclick="document.getElementById('parent').style.display='none';" - тогда при нажатии на parent_popup будет закрываться popup, а parent_popup будет открытым.
Ответить
Это я знаю. Не так как надо работает, клик закроет дочерний блок, а надо чтобы родительский тоже закрывался.
Ответить
Михаил, а можно как-нибудь разместить окно прямо по центру экрана? Чтобы при любом размере экрана окно было по центру?
Ответить
Подобрать top и left в процентах и поставить position: fixed;
Ответить
Михаил, делаю на сайте систему комментирования. Попытался сделать ответ на коммент, чтобы в $_get добавлялась parent_id и открывалась окно, но окно не открывается, что делать <script type = "text/javascript"> function openreg() { document.getElementById('parent_div').style.display='block'; } </script> <a href = "?id=5" class = "close" onclick = "openreg();">Ответить</a>
Ответить
Попробуйте вместо ссылки использовать другой элемент, поскольку переход по ссылке идёт ещё до окна.
Ответить
Наример? С формой тоже не получилось. Подкиньте идею
Ответить
<p onclick="openreg();">Ответить</p> А вообще проблема может быть, где угодно: http://myrusakov.ru/javascript-finderror.html
Ответить
Вы не поняли. Как я через p задам ссылку, мне нужно чтобы передался get параметр. Можете предложить что-нибудь
Ответить
Передать в openreg параметр с id, а получить к нему доступ можно, добавив в <p> ещё и id="parent_id". Тогда можно указать так onclick="openreg(this.id)". В результате, в функцию будет передан соответствующий parent_id.
Ответить
oo Привет!!!Можешь помочь есть функция простая функция onclick="javascript:ShowOrHide('block')" нужно что бы при закрытии или открытии окна,что бы сохранялось в браузере,можно как-то это замутить?Буду очень благодарен за ответ!!!спасибо зарание!
Ответить
Сохранялось в браузере при обновлении страницы? Если так, то надо использовать cookie: http://myrusakov.ru/javascript-cookie.html
Ответить
как сохранялось?ничего не сохраняется,у меня окно стоит открытое при обновлении страницы,а нужно что бы если человек закрыл его,то при следущейм обновлении,больше не открывалось..как можто такое сделать??
Ответить
Я понял, для этого и используются cookie. Надо сохранить состояние, а при следующем обновлении страницы прочитать из cookie это состояние.
Ответить
хмм,не подскажете как это реальзовать для простого окна через onclick="javascript:showorhide('block')" я новичёк в java не разбираюсь..(буду очень благодарен,и признателен!!
Ответить
Это задача не для новичков, поэтому изучайте JavaScript.
Ответить
Не путай Java с JavaScript
Ответить
Доброго времени суток) Я по тихоньку разбираюсь с javascript. Помогите правильно оформить тот же вызов попапа, что и у вас, но не в самом html, а в отдельном документе .js
Ответить
На JavaScript лучше не создавать окна, так как их браузеры не любят открывать.
Ответить
Я имела ввиду не создать окно, а само событие onclick писать в отдельном документе. Просто запуталась в синтаксисе window.onload = function showPopup(){ onclick=document.getElementById('popupbody').style.display='none'; } Не понимаю как правильно записать)))
Ответить
onclick никак не написать в другом документе. Это ещё можно нормально сделать с помощью jQuery, но только ради этого эту библиотеку не стоит подключать.
Ответить
Михаил, а как все-таки сделать закрытие всплывающего окна не только по нажатию на кнопку "закрыть" в popup, но еще и по нажатию на любое место затемненного фона. Думается мне, пользователям будет удобно иметь такую альтернативу. Спасибо!
Ответить
Перехватывать клик в любом другом месте и менять свойство display на none.
Ответить
Михаил, спасибо огромное за такой простой код, все работает и редактируется без проблем!! Вопрос: как сделать так, чтобы окно открывалось 1 раз за сессию?
Ответить
Сделайте проверку на php по сессии. Пока она не очистится, не выводить окно.
Ответить
Я имел ввиду доп. код для того, чтобы мои посетители видели окно только раз за сессию, а лучше 1 раз при заходе на сайт. Сейчас у меня окно отображается при каждом переходе на сайте.
Ответить
Вот я говорю про него. Можно и на javascript сделать проверку, выдавая пользователю куки. Если он уже смотрел окно и куки выдано, то больше не показывать.
Ответить
Михаил подскажите пожалуйста плагин который позволит выводить всплывающие окно на сайте, но в котором будет подписка на мою группу в Вконтакте ( вот такое как всплывает к примеру здесь: http://news.liga.net/news/society/896221-ukraintsam_ne_rekomenduyut_ezdit_v_kirgizstan_iz_za_bubonnoy_chumy.htm ) но что бы ему можна было задать размеры и место по центру страницы. Буду очень признателен.
Ответить
Михаил скажите пожалуйста как сделать чтобы при нажатии на кнопку всплывало окно с формой для внесения данных. сама форма есть . а вот проблема с тем как и куда прописать ее что бы при нажатии на кнопку она вылезла.
Ответить
Здравствуйте, Артем. Используйте jQuery.
Ответить
Я jquery вообще не знаю))Я примерно в посмотрел как но как размещать форму не пойму)
Ответить
Артем, обращайтесь в службу поддержки, я постараюсь Вам помочь.
Ответить
Доброго времени суток, интересует следующий вопрос. Как сделать так, чтобы данное окно отрывалось по клику определённой кнопки, а не срабатывало автоматически. P.s. Если меняю display: none на block, то в конечном итоге, не могу закрыть данную таблицу вообще.
Ответить
Здравствуйте! А как регулируется скорость всплытия окна? Вот здесь я хочу сделать ее в два раза меньше: http://www.beautiful-girls.biz/
Ответить
Михаил, здравствуйте. Что добавить в коде, если необходимо данное окно выводить только после того как посетитель нажал на ссылку?
Ответить
Добрый день, мне очень хочется создать всплывающее окно при подведении курсора на фотографию. но данный код не показывает это, или он показывает, но я не знаю как конкретно его изменить. Подскажите как сделать в уже готовой htm странице при подведении курсором на фото увеличение его.
Ответить
Хотите я вам покажу
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.