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

Открыть окно

Напишем 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 .


сайт, модальное окно, верстка