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

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

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

Другое преимущество относится к медленной загрузке, что может привлечь внимание пользователей.

Теперь, когда мы узнали, что такое модальное окно, перейдем к его созданию.

Есть различные способы создания модального окна с помощью HTML, CSS и JavaScript.

Давайте начнем создать код шаг за шагом!

1. Создайте HTML.

Создайте <div> с id=“example”. Любой контент внутри этой области будет скрыт браузером, а потом будет отображаться при активации. Любой другой контент может служить лишь фоном и никак не реагировать на перемещения мыши и нажатия клавиш.

Внутри #example разместите другой <div>, чтобы создать внешний вид диалогового окна. Оно будет содержать контент, который мы хотим показать пользователю.

<div id="example">
  <div>
    <p>Контент, который хотите показать пользователю.</p>
  </div>
</div>

2. Добавьте CSS.

Второй шаг - это добавление стиля к id с помощью CSS свойств.

#example {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
}

Потом добавим стиль к внутреннему div и сделаем его горизонтальным.

#example div {
width:350px;
height: 80px;
margin: 100px auto;
background-color: #f2f2f2;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius:  10px;
border:1px solid #666666;
padding:15px;
text-align:center;
font-weight: bold;
font-size: 15px;
border: 3px solid #cccccc;
position: absolute;
left: 50%;
top: 100px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

Для максимальной совместимости браузера вместе со свойствами border-radius и transform используются такие расширения, как -Webkit- для Safari, Google Chrome и Opera (новые версии), -ms- для Internet Explorer, и -Moz- для Firefox.

Также установите к body свойства height, margin, padding и font-family.

body {
height:100%;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}

3. Добавьте JavaScript.

Последним шагом является добавление JavaScript к нашему коду.

Мы можем добавить функцию внутри нашего документа или во внешнем .js файле.

function example() {
el = document.getElementById("example");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Чтобы скрытый контент стал видимым, используется автоматический метод переключения.

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

<a href='#' onclick=example()'>open</a>

В HTML будет необходимо добавить ссылку, чтобы скрыть его:

<a href='#' onclick=example()'>Click here to close the box</a>

Вот результат нашего кода:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      height:100%;
      margin:0;
      padding:0;
      font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
      font-size: 20px;
      color: #000000;
      }
      #example {
      visibility: hidden;
      position: absolute;
      left: 0;
      top: 0;
      width:100%;
      height:100%;
      text-align:center;
      z-index: 1000;
      }
      #example div {
      width:350px;
      height: 80px;
      margin: 100px auto;
      background-color: #f2f2f2;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius:  10px;
      border:1px solid #666666;
      padding:15px;
      text-align:center;
      font-weight: bold;
      font-size: 15px;
      border: 3px solid #cccccc;
      position: absolute;
      left: 50%;
      top: 100px;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h2>Создайте модальное окно</h2>
    <a href='#' onclick='example()'>open</a>
    <div id="example">
      <div>
        <p>Контент, который хотите показать пользователю.</p>
        <a href='#' onclick='example()'>Нажмите сюда, чтобы закрыть окно</a>
      </div>
      <script> 
        function example() {
        el = document.getElementById("example");
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        }
      </script>
    </div>
  </body>
</html>

Рассмотрим другой пример диалогового окна:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .modal {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #cccccc;
      opacity: 0;
      visibility: hidden;
      transform: scale(1.1);
      transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
      }
      .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #eeeeee;
      padding: 1rem 1.5rem;
      width: 24rem;
      border-radius: 0.5rem;
      }
      .close-button {
      float: right;
      width: 1rem;
      line-height: 1.5rem;
      text-align: center;
      cursor: pointer;
      border-radius: 30px;
      background-color: #eeeeee;
      }
      .close-button:hover {
      background-color: #adadad;
      }
      .show-modal {
      opacity: 1;
      visibility: visible;
      transform: scale(1.0);
      transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
      }
    </style>
  </head>
  <body>
    <h2>Создайте модальное окно</h2>
    <button class="example">Нажмите сюда!</button>
    <div class="modal">
      <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>This is a Modal</h2>
      </div>
    </div>
    <script>
      var modal = document.querySelector(".modal");
          var trigger = document.querySelector(".example");
          var closeButton = document.querySelector(".close-button");
      
          function toggleModal() {
              modal.classList.toggle("show-modal");
          }
      
          function windowOnClick(event) {
              if (event.target === modal) {
                  toggleModal();
              }
          }
      
          trigger.addEventListener("click", toggleModal);
          closeButton.addEventListener("click", toggleModal);
          window.addEventListener("click", windowOnClick); 
    </script>
  </body>
</html>

Можем также создать всплывающее модальное окно (popup) с помощью использования CSS3:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      .modalDialog {
      position: fixed;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,0.1);
      z-index: 99999;
      opacity:0;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      pointer-events: none;
      }
      .modalDialog:target {
      opacity:1;
      pointer-events: auto;
      }
      .modalDialog > div {
      width: 400px;
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
      background: -moz-linear-gradient(#2edbe8, #01a6b2);
      background: -webkit-linear-gradient(#2edbe8, #01a6b2);
      background: -o-linear-gradient(#2edbe8, #01a6b2);
      }
      .close {
      background: #606061;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
      }
      .close:hover { background: #6ed1d8; }
    </style>
  </head>
  <body>
    <h2>Создайте модальное окно</h2>
    <a href="#openModal">Box</a>
    <div id="openModal" class="modalDialog">
      <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Модальное окно </h2>
        <p>Это модальное окно создано с помощью CSS3.</p>
      </div>
      <a href="#close" title="Close" class="close">x</a>
    </div>
  </body>
</html>