Как создать модальное окно с помощью 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';
   }
}

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

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

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

Спасибо! 🙏