Как создать адаптивное всплывающее модальное окно используя HTML, CSS и Javascript

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

Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

В диком мире веб-материалов и приложений вы, наверное, сталкивались с этими маленькими всплывающими окнами, верно? Они похожи на мини-окна, которые появляются на вашем экране.

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

HTML КОД:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Popup in HTML CSS Javascript | Codehal</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <button class="show-popup">Show Popup</button>

    <div class="popup-container">
        <div class="popup-box">
            <h1>Hello World!</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eius itaque molestiae sit quidem ullam, quis ut molestias quas dolores cum ratione, sint quibusdam iusto.</p>
            <button class="close-btn">OK</button>
        </div>
    </div>


    <script src="script.js"></script>

</body>

</html>

CSS КОД:


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f2f2f2;
}

.show-popup {
  padding: 18px 40px;
  background: #6e78ff;
  border: none;
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  cursor: pointer;
  font-size: 18px;
  color: #f2f2f2;
  font-weight: 500;
}

.popup-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}

.popup-container.active {
  opacity: 1;
  pointer-events: auto;
  transition: .4s ease;
}

.popup-container .popup-box {
  width: 500px;
  background: #f2f2f2;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  padding: 30px;
  margin: 10px;
  transform: scale(0);
}

.popup-container.active .popup-box {
  transform: scale(1);
  transition: .4s ease;
  transition-delay: .25s;
}

.popup-box h1 {
  color: #333;
  line-height: 1;
}

.popup-box p {
  color: #333;
  margin: 12px 0 20px;
}

.popup-box .close-btn {
  width: 100%;
  height: 45px;
  background: #6e78ff;
  border-radius: 6px;
  border: none;
  outline: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  cursor: pointer;
  font-size: 18px;
  color: #f2f2f2;
  font-weight: 500;
}

JAVASCRIPT КОД:


const showPopup = document.querySelector('.show-popup');
const popupContainer = document.querySelector('.popup-container');
const closeBtn = document.querySelector('.close-btn');

showPopup.onclick = () => {
    popupContainer.classList.add('active');
}

closeBtn.onclick = () => {
    popupContainer.classList.remove('active');
}

Как создать адаптивное всплывающее модальное окно используя HTML, CSS и Javascript

Отправить комментарий

نموذج الاتصال