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

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

HTML:

<div class="dialog-wrap">
	<div class="dialog">
		<div class="dialog-header">
		 <h2>Заголовок окна</h2>
		 <span class="dialog-close">x</span>
		</div>
		<div class="dialog-content">
			Содержимое всплывающего окна.
		</div>
	</div>
</div>

CSS:

.dialog-wrap {
	background: rgba(0, 0, 0, 0.65);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: none;
  min-height: 600px;
  overflow: auto;
  position: absolute;
  text-align: center;  
}

.dialog-wrap::after {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.dialog-wrap > .dialog {
	display: inline-block;
	vertical-align: middle;
	background: none repeat scroll 0 0 white;
  border-radius: 4px;
  box-sizing: border-box;
  margin: auto;
  max-width: 640px;
  min-width: 400px;
  padding: 24px;
  position: relative;
  text-align: left;
}

.dialog-header {
	position: relative;
}

.dialog-header h2 {
	margin: 0;
	padding-right: 16px;
}

.dialog-close {
	position: absolute;
	display: block;
	text-align: center;
	right: 0;
	top: 0;
	cursor: pointer;
	width: 16px;
	line-height: 16px;
	background: #a00;
	color: #fff;
	font-size: 12px;
	border-radius: 2px;
}

.dialog-content {
	margin-top: 16px;
}

Javascript:

<script>
  $('.button').click(function(){
    $('.dialog-wrap').show();
  });

  $('.dialog-wrap, .dialog-close').click(function(){
    $('.dialog-wrap').hide();
  });
  
  $('.dialog').click(function(e){
    e.stopPropagation();
  })
</script>

При клике по кнопке вызываем функцию, которая показывает диалоговое окно, делает блок dialog-wrap видимым. Будем делать окно, которое можно закрыть двумя способами:

1. При клике на кнопку с крестиком;
2. При клике в любом месте вне границ диалогового окна.

Как все это работает:

• Кликаем на кнопку. Обрабатываем действие через js. Javascript -> 3 строка.
• Блок dialog-wrap получает display: block. С помощью css этот блок заполняет всю площадь страницы и имеет заливку  с прозрачностью, чтобы акцентировать внимание на всплывающем окне. CSS -> 21-32 строки.
• Внутренний блок dialog выравнивается по центру. Это делается через CSS-> 14-23 строки.
• При клике по крестику — закрываем окно. Javascript-> 6-8 строки.
• При клике в любой части вне окна — закрываем окно.
• При клике по содержимому всплывающего окна — не закрывать его. Javascript->10-12 строки.