В этой статье мы создадим модальное окно на чистом 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'; } }
Поздравляем! ✨
Теперь вы можете самостоятельно создавать модальные окна.
Спасибо, что прочитали статью! Если она была для вас полезной - поставьте лайк или просто напишите об этом в комментариях. Это важно для меня. Я приветствую новые мнения и критику🫶.
Спасибо! 🙏
05.05.2023 14:00
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
05.05.2023 11:59
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.
05.05.2023 11:57
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.
05.05.2023 09:26