Что такое модальное окно? Модальное окно — это элемент, который отображается перед всеми другими элементами на странице и отключает их.

Когда я впервые узнал о модальном, я был поражен им. Я всегда думал, что вам всегда нужен другой 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
 })
}

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

Нажмите на ссылку ниже, чтобы увидеть этот проект.

Модальное окно (codepen.io)

Надеюсь, вам понравилось, и вы узнали что-то новое из этой статьи. Спасибо за прочтение.