<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как сделать всплывающее окно с затемнением

Как сделать всплывающее окно с затемнением

Очень часто бывает нужно вывести пользователю какую-нибудь информацию или предложение в отдельном окне. Поскольку такая информация будет максимально легко доходить до посетителей. Однако, если использовать 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 гарантирует, что это окно увидят все посетители.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (53):

cyber93 cyber93 14.04.2012 18:51:17

Спасибо за урок, пригодится.

Ответить

bernoulli bernoulli 11.03.2016 12:55:03

в стиле сделал так #popup { background-color: #fff; position: relative; margin: 0 auto; height: 165px; top: 300px; padding: 40px; border-radius: 4px; color: #000; width: 500px; } так центрируется нормально нежели с left

Ответить

morozov-semen morozov-semen 14.05.2012 19:36:14

Здравствуйте, Михаил. В вашем примере всплывающее окно и черный фон - полупрозрачны. А вы не знаете: можно ли как-нибудь сделать так чтобы дочерний блок <div id="popup"> в отличие от родительского <div id="parent_popup"> был непрозрачным?

Ответить

Admin Admin 14.05.2012 19:39:35

Для этого надо использовать вместо opacity обычный фон у popup. Этот фон должен быть в png, и он должен быть прозрачным сам по себе.

Ответить

morozov-semen morozov-semen 14.05.2012 19:42:16

Спасибо.

Ответить

piter piter 08.09.2015 11:27:40

вместо opacity нужно сделать прозрачность для id="parent_popup" через цвет: background: rgba(0, 0, 0, 0.55);

Ответить

lev_100rus lev_100rus 22.08.2012 18:53:33

Михаил, Здравствуйте! Помогите пожалуйста с такой проблемой: Я пишу в HTML такой код: <div id = "header></div> После этого захожу в CSS файл и ставлю там высоту и ширину шапки, но она не хочет изменяться! Почему? Вот код CSS: div#header { background-image:url('images/header.jpg'); width: 100%; height: 50px; }

Ответить

Admin Admin 22.08.2012 20:27:11

После header кавычка не закрыта.

Ответить

andryuha49 andryuha49 05.09.2012 12:45:36

добрый день, михаил. ви не подскажите как сделать всплывающее окно с прокруткой. тоесть после вызова окна если его контэнт не помещяется в область видемости браузера и при прокрутке прокручевалось само окошко а контент сайта оставался на месте?

Ответить

Admin Admin 05.09.2012 18:17:36

Добавить в css к всплывающему окну помимо фиксированных размеров, ещё и overflow:auto;

Ответить

andryuha49 andryuha49 05.09.2012 19:00:01

это не поможет. стрница за окном всеровно будет прокручиваться. вот нашел пример: http://javascript.ru/forum/xhtml-html-css/22370-prokrutka-vsplyvayushhego-okna.html он рабочий. но под себя нада еще поковырять.

Ответить

forward forward 15.01.2013 01:41:09

Михаил, подскажи, как сделать, чтобы страница открывалась не изначально со всплывающим окном и затемненным фоном, а чтобы это окно открывалось пользователем по ссылке?

Ответить

Admin Admin 15.01.2013 07:54:23

Сделать какой-нибудь <span onclick="вызов_окна()">ссылка</span>. В функции вызов_окна() сделать parent_popup с display="block"; По умолчанию же display="none";

Ответить

forward forward 16.01.2013 01:36:57

Спасибо за ответ. Однако, поскольку я чайник, он мне ничего не дал ) Может, распишете подробнее? Или отдельную статью на этот счёт сделаете?

Ответить

Admin Admin 16.01.2013 10:39:49

Рекомендую изучать JavaScript, задача несложная, но написать десяток строчек придётся. Вот курс по JS: http://srs.myrusakov.ru/kurs

Ответить

DoKeR DoKeR 01.04.2013 19:11:02

Здравствуйте, Михаил. Добавил к блоку <div id="parent_popup"> обработку клика на закрытие, т.е. onclick="document.getElementById('parent_popup').style.display='none';" , но при нажатии на синее окошко (<div id="popup">) закрываются оба. Как сделать, чтобы при нажатии на синее окошко не закрывалось всё, а при нажатии все синего окошка (т.е. на затемнённый фон) закрывалось всё?

Ответить

Admin Admin 01.04.2013 21:03:11

Попробуйте так onclick="document.getElementById('parent').style.display='none';" - тогда при нажатии на parent_popup будет закрываться popup, а parent_popup будет открытым.

Ответить

DoKeR DoKeR 01.04.2013 22:43:52

Это я знаю. Не так как надо работает, клик закроет дочерний блок, а надо чтобы родительский тоже закрывался.

Ответить

malina95 malina95 03.04.2013 22:49:58

Михаил, а можно как-нибудь разместить окно прямо по центру экрана? Чтобы при любом размере экрана окно было по центру?

Ответить

Admin Admin 04.04.2013 11:14:22

Подобрать top и left в процентах и поставить position: fixed;

Ответить

ilyadenisovid ilyadenisovid 25.05.2013 13:18:56

Михаил, делаю на сайте систему комментирования. Попытался сделать ответ на коммент, чтобы в $_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>

Ответить

Admin Admin 25.05.2013 13:24:42

Попробуйте вместо ссылки использовать другой элемент, поскольку переход по ссылке идёт ещё до окна.

Ответить

ilyadenisovid ilyadenisovid 25.05.2013 15:07:35

Наример? С формой тоже не получилось. Подкиньте идею

Ответить

Admin Admin 25.05.2013 15:21:26

<p onclick="openreg();">Ответить</p> А вообще проблема может быть, где угодно: http://myrusakov.ru/javascript-finderror.html

Ответить

ilyadenisovid ilyadenisovid 25.05.2013 18:00:31

Вы не поняли. Как я через p задам ссылку, мне нужно чтобы передался get параметр. Можете предложить что-нибудь

Ответить

Admin Admin 25.05.2013 22:24:27

Передать в openreg параметр с id, а получить к нему доступ можно, добавив в <p> ещё и id="parent_id". Тогда можно указать так onclick="openreg(this.id)". В результате, в функцию будет передан соответствующий parent_id.

Ответить

George George 26.05.2013 18:49:41

oo Привет!!!Можешь помочь есть функция простая функция onclick="javascript:ShowOrHide('block')" нужно что бы при закрытии или открытии окна,что бы сохранялось в браузере,можно как-то это замутить?Буду очень благодарен за ответ!!!спасибо зарание!

Ответить

Admin Admin 26.05.2013 21:02:28

Сохранялось в браузере при обновлении страницы? Если так, то надо использовать cookie: http://myrusakov.ru/javascript-cookie.html

Ответить

George George 26.05.2013 21:18:04

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

Ответить

Admin Admin 26.05.2013 21:53:41

Я понял, для этого и используются cookie. Надо сохранить состояние, а при следующем обновлении страницы прочитать из cookie это состояние.

Ответить

George George 26.05.2013 23:41:43

хмм,не подскажете как это реальзовать для простого окна через onclick="javascript:showorhide('block')" я новичёк в java не разбираюсь..(буду очень благодарен,и признателен!!

Ответить

Admin Admin 27.05.2013 08:16:48

Это задача не для новичков, поэтому изучайте JavaScript.

Ответить

asoftgame asoftgame 24.07.2015 13:18:55

Не путай Java с JavaScript

Ответить

Hekyba Hekyba 03.06.2013 17:52:30

Доброго времени суток) Я по тихоньку разбираюсь с javascript. Помогите правильно оформить тот же вызов попапа, что и у вас, но не в самом html, а в отдельном документе .js

Ответить

Admin Admin 03.06.2013 18:13:50

На JavaScript лучше не создавать окна, так как их браузеры не любят открывать.

Ответить

Hekyba Hekyba 03.06.2013 18:19:10

Я имела ввиду не создать окно, а само событие onclick писать в отдельном документе. Просто запуталась в синтаксисе window.onload = function showPopup(){ onclick=document.getElementById('popupbody').style.display='none'; } Не понимаю как правильно записать)))

Ответить

Admin Admin 03.06.2013 18:29:18

onclick никак не написать в другом документе. Это ещё можно нормально сделать с помощью jQuery, но только ради этого эту библиотеку не стоит подключать.

Ответить

light204 light204 04.08.2013 11:32:26

Михаил, а как все-таки сделать закрытие всплывающего окна не только по нажатию на кнопку "закрыть" в popup, но еще и по нажатию на любое место затемненного фона. Думается мне, пользователям будет удобно иметь такую альтернативу. Спасибо!

Ответить

Admin Admin 05.08.2013 10:18:42

Перехватывать клик в любом другом месте и менять свойство display на none.

Ответить

melik melik 29.08.2013 14:03:15

Михаил, спасибо огромное за такой простой код, все работает и редактируется без проблем!! Вопрос: как сделать так, чтобы окно открывалось 1 раз за сессию?

Ответить

Admin Admin 29.08.2013 14:57:09

Сделайте проверку на php по сессии. Пока она не очистится, не выводить окно.

Ответить

melik melik 29.08.2013 15:02:27

Я имел ввиду доп. код для того, чтобы мои посетители видели окно только раз за сессию, а лучше 1 раз при заходе на сайт. Сейчас у меня окно отображается при каждом переходе на сайте.

Ответить

Admin Admin 30.08.2013 19:11:09

Вот я говорю про него. Можно и на javascript сделать проверку, выдавая пользователю куки. Если он уже смотрел окно и куки выдано, то больше не показывать.

Ответить

Andrij411 Andrij411 05.09.2013 17:22:17

Михаил подскажите пожалуйста плагин который позволит выводить всплывающие окно на сайте, но в котором будет подписка на мою группу в Вконтакте ( вот такое как всплывает к примеру здесь: http://news.liga.net/news/society/896221-ukraintsam_ne_rekomenduyut_ezdit_v_kirgizstan_iz_za_bubonnoy_chumy.htm ) но что бы ему можна было задать размеры и место по центру страницы. Буду очень признателен.

Ответить

artem_vostrikov artem_vostrikov 19.12.2013 13:32:12

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

Ответить

tikkiwiki tikkiwiki 19.12.2013 22:25:55

Здравствуйте, Артем. Используйте jQuery.

Ответить

artem_vostrikov artem_vostrikov 20.12.2013 03:02:14

Я jquery вообще не знаю))Я примерно в посмотрел как но как размещать форму не пойму)

Ответить

tikkiwiki tikkiwiki 20.12.2013 12:40:49

Артем, обращайтесь в службу поддержки, я постараюсь Вам помочь.

Ответить

Eks1g1 Eks1g1 26.12.2013 08:32:06

Доброго времени суток, интересует следующий вопрос. Как сделать так, чтобы данное окно отрывалось по клику определённой кнопки, а не срабатывало автоматически. P.s. Если меняю display: none на block, то в конечном итоге, не могу закрыть данную таблицу вообще.

Ответить

prettygirl prettygirl 01.05.2014 16:08:43

Здравствуйте! А как регулируется скорость всплытия окна? Вот здесь я хочу сделать ее в два раза меньше: http://www.beautiful-girls.biz/

Ответить

Shcwab Shcwab 24.03.2015 02:02:21

Михаил, здравствуйте. Что добавить в коде, если необходимо данное окно выводить только после того как посетитель нажал на ссылку?

Ответить

lubawa76 lubawa76 15.08.2015 09:24:16

Добрый день, мне очень хочется создать всплывающее окно при подведении курсора на фотографию. но данный код не показывает это, или он показывает, но я не знаю как конкретно его изменить. Подскажите как сделать в уже готовой htm странице при подведении курсором на фото увеличение его.

Ответить

ashab ashab 12.12.2016 22:54:52

Хотите я вам покажу

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.