Модальное окно на JS и CSS своими руками

Всем привет. Сегодня будем делать самостоятельно модальное окно с использованием чистого JavaScript и CSS. Подобные попап окна очень хорошо делать на jQuery, как это показано в этом примере, но бывают случаи, когда нет необходимости подключать тяжеловесную библиотеку к простой странице. Тем более, что пишется это все в несколько строчек JS кода.

Демо

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

Давайте начнем с разметки страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="box">
  <input type="button" value="button" id="btn" />
  <p>POPUP CONTENT</p>
  <div id="popup">
    <header>
      <span id="close">+</span>
    </header>
    <div class="content">
      <p>POPUP CONTENT</p>
      <img src="Copy of Stopwatch.svg" width="100" alt="" />
    </div>
    <footer></footer>
  </div>
</div>
<div class="overlay" id="overlay" style="display:none;"></div>

Следующим шагом будет добавление CSS стилей к элементам на странице.

1
2
3
4
5
6
7
8
9
10
11
12

var popup = document.getElementById('popup'),
  btn = document.getElementById('btn'),
  close = document.getElementById('close'),
  body = document.getElementsByTagName('body');
  btn.onclick = function () {
	  popup.style.display = 'block';
	  document.getElementById("overlay").style.display="block";
 };
  close.onclick = function () {
    popup.style.display = 'none';
    document.getElementById("overlay").style.display="none";		
    }

И в заключении подключим JS файл и напишем следующий код:

1
2
3
4
5
6
7
8
9
10
11
12

var popup = document.getElementById('popup'),
  btn = document.getElementById('btn'),
  close = document.getElementById('close'),
  body = document.getElementsByTagName('body');
  btn.onclick = function () {
	  popup.style.display = 'block';
	  document.getElementById("overlay").style.display="block";
 };
  close.onclick = function () {
    popup.style.display = 'none';
    document.getElementById("overlay").style.display="none";		
    }

На этом все. Открытие модального окна происходит после нажатия на кнопку, а закрыть его можно, кликнув на крестик в правом верхнем углу. К нему я добавил для красоты эффект вращения на 360 градусов по часовой стрелке при наведении. В само окно поставил SVG анимацию.