В этой статье мы создадим модальное окно на чистом 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'; } }
Поздравляем! ✨
Теперь вы можете самостоятельно создавать модальные окна.
Спасибо, что прочитали статью! Если она была для вас полезной - поставьте лайк или просто напишите об этом в комментариях. Это важно для меня. Я приветствую новые мнения и критику🫶.
Спасибо! 🙏
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.