StillMaster » Веб разработка » Как сделать всплывающее окно или как его еще называют модальное окно.

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

Для этого нам потребуется три технологии CSS, html и jаvascript.

Для начала нам нужно придумать вид формы которая у нас будет всплывать. Кстати нажав кнопку ниже вы увидите как будет работать и выглядеть форма про которую я вам расскажу.



Напишем html разметку.

<!-- Триггер/Открыть модальный -->
        <button id="myBtn">Открыть окно</button>

        <!-- Модальный -->
        <div id="myModal" class="modal1">

          <!-- Модальное содержание -->
           <div id="modal_top">

        <div id="modal_topheader">Авторизация на сайте 

            <span class="cloze">&times;</span></div>
            <p>Здесь нужные вам данные</p>
          </div>

        </div>


Затем зададим стили для нашего модального окна.

/* Модальный (фон) */
.modal1 {
  display: none; /* Скрыто по умолчанию */
   align-items: center;
    justify-content: space-around;
}

/* Модальное содержание/коробка */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% сверху и по центру */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
}

/* Кнопка закрытия */
.cloze {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.cloze:hover,
.cloze:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

#modal_top { background: #333333 ; height: 162px; width: 100%; max-width: 390px; position: absolute;  }

#modal_topheader {background: black; padding: 10px; text-transform: uppercase; text-align: center; cursor: move; display: flex;  align-items: center; justify-content: space-between;}

Ну и последним шагом напишем небольшой скрипт для нашего модального окна.

// Получить модальный
var modal1 = document.getElementById("myModal");

// Получить кнопку, которая открывает модальный
var btn = document.getElementById("myBtn");

// Получить элемент <span>, который закрывает модальный
var span = document.getElementsByClassName("cloze")[0];

// Когда пользователь нажимает на кнопку, откройте модальный
btn.onclick = function() {
  modal1.style.display = "flex";
}

// Когда пользователь нажимает на <span> (x), закройте модальное окно
span.onclick = function() {
  modal1.style.display = "none";
}

// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) {
  if (event.target == modal1) {
    modal1.style.display = "none";
  }
}

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


Яндекс Практикум

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


сайт, модальное окно, верстка
Поделиться:

121 07.02.23