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

RedDeveloper
05.01.2023 16:05
Как создать модальное окно с помощью CSS и JS

В этой статье мы создадим модальное окно на чистом JavaScript.

Для начала давайте разберемся, что такое модальное окно. Итак, модальное окно - это всплывающее окно, которое отображается поверх текущей страницы.

Выделим следующие шаги 🖍:

  1. Создайте разметку.
  2. Написать код CSS для стилизации.
  3. Добавить JavaScript.

Теперь давайте создадим разметку:


 <button id="new-btn" class="new-btn"><h5>Open Modal</h5></button>

 <div id="modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="header-title">Title</h3>
                <input type="text" class="header-text">
            </div>
            <div class="modal-body">
                <h3 class="header-title-2">Text</h3>
                <textarea class="header-text-2"></textarea>
            </div>
            <div class="modal-footer">
                <button id="saveBtn">Save</button>
                <button id="canselBtn">Cansel</button>
            </div>
        </div>
    </div>

Добавьте код CSS:

/* Styles for the open button */
.new-btn {
   display: block;
   height: 100%;
   width: 100%;
   padding: 0;
}
 
h5 {
   font-size: 13px;
   color: rgb(9, 169, 243);
   margin: 10px;
}
 
/* Styles for modal */
.modal {
   background-color: white;
   width: 350px;
   height: 350px;
   border-radius: 5px;
   box-sizing: border-box;
   position: relative;
   display: none;
   z-index: 1;
}
 
.modal-content {
   width: 350px;
   height: 350px;
}
 
/* Modal Header */
.modal-header {
   height: 100px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding: 10px;
   gap: 10px;
}
 
.header-title, .header-title-2 {
   font-family: 'Open Sans', sans-serif;
   color: rgba(14, 34, 42, 0.966);
   font-size: 20px;
   margin: 0;
}
 
.header-text {
   width: 316px;
   height: 20px;
   background-color: #f8f8f8;
   border: 1px solid black;
   border-radius: 5px;
}
 
/* Modal Body */
.modal-body {
   height: 150px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding: 10px;
   gap: 10px;
}
 
.header-text-2 {
   width: 324px;
   height: 130px;
   box-sizing: border-box;
   resize: none;
   font-size: 12px;
   background-color: #f8f8f8;
   border-radius: 5px;
}
 
/* Close and Save Buttons */
.modal-footer {
   display: flex;
   height: 50px;
   justify-content: flex-end;
   align-items: center;
}
 
#btn-save, #btn-cansel{
   height: 40px;
   width: 88px;
   border: 1px solid rgb(9, 169, 243);;
   border-radius: 5px;
   margin-right: 17px;
   font-family: 'Open Sans', sans-serif;
   font-size: 15px;
}
 
#btn-save {
   color: #fff;
   background-color: rgb(9, 169, 243);
}
 
#btn-cansel {
   color: rgb(9, 169, 243);
   background-color: #fff;
}

Пример:

Также вы можете изменить дизайн вашей кнопки "Закрыть" в зависимости от того, какое содержимое вы хотите видеть внутри модала, добавив:

<span class="close">x</span>

Пример:

Пример

Теперь пишем JavaScript:

const modal = document.getElementById('modal');
const openBtn = document.getElementById('new-btn');
const closeBtn = document.getElementById('canselBtn');
const saveBtn = document.getElementById('saveBtn');
 
openBtn.onclick = function() {
   modal.style.display = 'block';
}
 
closeBtn.onclick = function() {
   modal.style.display = 'none';
}
 
window.onclick = function(e) {
   if (e.target == modal) {
       modal.style.display = 'none';
   }
}

Поздравляем! ✨

Теперь вы можете самостоятельно создавать модальные окна.

Спасибо, что прочитали статью! Если она была для вас полезной - поставьте лайк или просто напишите об этом в комментариях. Это важно для меня. Я приветствую новые мнения и критику🫶.

Спасибо! 🙏

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.