Что такое модальное окно? Модальное окно — это элемент, который отображается перед всеми другими элементами на странице и отключает их.
Когда я впервые узнал о модальном, я был поражен им. Я всегда думал, что вам всегда нужен другой html, чтобы иметь другое окно. В этой статье я поделюсь тем, что я узнал о создании модального окна.
В моем проекте у меня есть 2 модальных окна, которые будут открываться двумя отдельными кнопками.
HTML
Кнопки
Для двух кнопок в нашем примере я использовал атрибуты данных и назвал его data-open, а значение, которое я присвоил data-open, — это идентификатор модального окна. окно, которое кнопка собирается открыть. Это облегчит работу, особенно для нескольких модальных окон.
<div class="container"> <button data-open = "firstModal" >Show First Modal Window</button> <button data-open ="secondModal">Show Second Modal Window</button> </div>
Значение атрибутов данных будет использоваться в качестве идентификаторамодальных окон для легкого доступа к целевым модальным окнам для открытия. Вы поймете, что я имею в виду, когда закончите читать эту статью.
Модали
В двух модальных окнах в моем проекте, как я упоминал ранее, я присвоил Id такой же, как значение атрибута данных кнопки.
Я использую элемент div и назначаю ему класс modal. Внутри этого элемента div я помещаю другой div и назначаю modal-dialog в качестве класса. И внутри этого div modal-dialog я поместил текст и кнопку, которые в этом примере будут использоваться для закрытия открытого модального окна.
<div id="firstModal" class="modal"> <div class="modal-dialog"> <div>This is the first modal window</div> <button id="btnCloseModal" data-close>Close</button> </div> </div> <div id="secondModal" class="modal"> <div class="modal-dialog"> <div >This is the second modal window</div> <button id="btnCloseModal" data-close>Close</button> </div> </div>
CSS
Я не вложил слишком много дизайна в этот проект, так как моя задача — показать, как открывать и закрывать модальные окна. Для модальных свойств свойства по умолчанию находятся в модальном классе, см. код ниже. Он должен начать скрытым и для этого примера сделать размер, чтобы покрыть весь экран. Я советую установить темный фон, чтобы зритель мог больше сосредоточиться на диалоговом окне. Не забудьте присвоить значение z-index, которое сделает его поверх каждого веб-элемента.
.modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); opacity: 0; z-index: 99; transition: all 0.35s ease-in; }
Внутри нашего модального окна у нас есть диалоговое окно с назначенным классом «modal-dialog». В этом случае я установил высоту и ширину 30% области просмотра. Это диалоговое окно будет содержать информацию, на которую вы хотите обратить внимание пользователя.
.modal-dialog{ height: 30vh; width: 30vw; border: 1px solid black; background: white; }
Поскольку наши модальные окна по умолчанию скрыты, нам нужен класс, который сделает их видимыми. В данном случае я использовал класс is-visible, но всегда должен быть с классом modal. См. ниже.
.modal.is-visible { visibility: visible; opacity: 1; }
JS
По умолчанию, если вы заглянете в html-файл, вы увидите, что класса is-visible нет. Это будет обрабатываться файлом js, добавляя его при нажатии кнопки и удаляя при закрытии.
Код
Во-первых, я объявил переменные, которые будут содержать атрибут данных.
const dataOpen = "[data-open]"; // data attributes of two buttons that will open modals const dataClose = "[data-close]";// data attributes of two buttons that will close modals
Мне нужно получить все элементы с определенным атрибутом данных и сохранить их в переменной.
let openData = document.querySelectorAll(dataOpen); let closeData = document.querySelectorAll(dataClose);
Наконец, приведенный ниже код выполняет итерацию для всех элементов, найденных по определенному атрибуту данных, указанному выше. Первый цикл for перебирает элементы с "data-open" (атрибут данных), а второй цикл for повторяет элементы с "data-close" (атрибут данных).< br /> в этом примере значение каждого "data-open" (атрибут данных) совпадает с модальным идентификатором модального окна, которое оно открывает.
Я не назначал значение на "data-close", так как мы можем закрыть модальное окно другим методом, используя метод parentElement.
Значение атрибута данных будет полезно для получения элемента(ов) по идентификатору, для добавления и удаления класса is-visible.
for (const elm of openData){ elm.addEventListener('click',function(){ //add click event on buttons that will show modal const dataOpen = this.dataset.open; // assigns the data attributes value which is the same on the modal's Id to be opened document.getElementById(dataOpen).classList.add("is-visible"); //get the element and add "is-visible" class }) } for (const elm of closeData){ elm.addEventListener('click',function(){ // add click event on buttons that will close modal this.parentElement.parentElement.classList.remove("is-visible"); get the element and remove "is-visible" class }) }
Использование модального окна — эффективный способ, если вы хотите, чтобы пользователь что-то увидел или сделал. Это может быть простое оповещение, форма для заполнения, пошаговое руководство по процессу или что-то еще, что вы хотите, чтобы пользователь сосредоточил внимание и увидел или сделал.
Нажмите на ссылку ниже, чтобы увидеть этот проект.
Надеюсь, вам понравилось, и вы узнали что-то новое из этой статьи. Спасибо за прочтение.