Страницы

Поиск по вопросам

четверг, 21 февраля 2019 г.

Как открыть модальное окно Bootstrap без JQuery и bootstrap.js?

В моем проекте не используется JQuery и bootstrap.js, так уж сложилось. Стараемся как можно меньше использовать библиотеки.
Нужно реализовать модальное окно, но использовать вышеупомянутые JQuery и bootstrap.js ради одного окошка - крайне не желательно.
Есть ли решение этой проблемы?


Ответ

Например самое простое с применением псевдокласса :target
/* Стили для модального*/ #modal { display: none; } /* Изменяем вид вывода при соответствии */ #modal:target { display: block; } /* Закрытие модального*/ .close { position: absolute; top: 1rem; right: 1rem; } /* Доп. стилизация модального*/ #modal { max-width: 300px; height: 100px; margin: 2rem auto; border: 1px solid #ccc; padding: 5rem 2rem; text-align: center; position: relative; } /* Стилизация кнопки, чтобы глаз радовала.*/ .btn { width: 200px; height: 34px; line-height: 34px; border: 1px solid #ccc; border-radius: 25px; color: #111; background: #eee; text-decoration: none; display: block; text-align: center; position: relative; } вызвать модальное


Псевдо класс :target является одной из замечательных особенностей CSS3. Он соответствует элементу, на который указывает идентификатор в URI документа. Идентификатор в URI содержит символ “#”, за которым следует имя идентификатора, соответствующее значению атрибута id элемента в документе.

Комментариев нет:

Отправить комментарий