Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения

Всплывающее окно на HTML и CSS

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

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

Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert().

Всплывающее окно

Первым шагом создания всплывающего окна является создание элемента <div> (или любого другого элемента) и его оформление:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
	  }
    </style>
  </head>

  <body>
  
    <div class="okno">
	  Всплывающее окошко!
	</div>

  </body>
</html>
Попробовать »

Этот <div> и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
	  }
	  #okno:target {display: block;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!
	</div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>
Попробовать »

Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента <div> сменится с none на block.

Теперь надо расположить <div> посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:

#okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  display: none;
  
  /*позиционируем и центрируем*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент <div> внутри элемента <a>:

<a href="#" id="main">
  <div id="okno">
	Всплывающее окошко!
  </div>
</a>

Затем мы позиционируем элемент <a> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  #main {
	    display: none;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	  }
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #main:target {display: block;}
    </style>
  </head>

  <body>
  
    <a href="#" id="main">
      <div id="okno">
	    Всплывающее окошко!
      </div>
    </a>
	
	<a href="#main">Вызвать всплывающее окно</a>

  </body>
</html>
Попробовать »

У элемента <div> убираем display: none; (он больше не нужен, так как скрываем мы теперь <a>). В итоге родительский <a> выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.

На этом создание простого всплывающего окна закончено.

Модальное окно

Для создания всплывающего модального окна, берём элемент <div>, оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #okno:target {display: block;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!
    </div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>

Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему <div> и оформив:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #okno:target {display: block;}
	  .close {
	    display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!<br>
	  <a href="#" class="close">Закрыть окно</a>
    </div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>
Попробовать »

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный <div>:

<div id="zatemnenie">
  <div id="okno">
	Всплывающее окошко!<br>
	<a href="#" class="close">Закрыть окно</a>
  </div>
</div>

Позиционируем родительский <div> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.

У дочернего <div> убираем display: none; (он больше не нужен, так как родительский <div> будет скрывать всё, что находится внутри него). В итоге родительский <div> теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  #zatemnenie {
	    background: rgba(102, 102, 102, 0.5);
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: none;
	  }
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		background: #fff;
	  }
	  #zatemnenie:target {display: block;}
	  .close {
	    display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>

  <body>
  
    <div id="zatemnenie">
      <div id="okno">
	    Всплывающее окошко!<br>
	    <a href="#" class="close">Закрыть окно</a>
      </div>
    </div>
	
	<a href="#zatemnenie">Вызвать всплывающее окно</a>

  </body>
</html>
Попробовать »

Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru