close() для модального окна | PHPClub
Вход Регистрация
Что нового?
Юбилейный DevConfX пройдет 21-22 июня в Москве. Как всегда — Вы решаете, кто попадет в программу секции Backend — голосуйте за интересные доклады
JavaScript отключён. Чтобы полноценно использовать наш сайт, включите JavaScript в своём браузере.
- Автор темы $skip
- Дата начала
$skip
Guest
- #1
Как закрыть модальное окно? с помощью javascript
$skip
Guest
- #2
Войдите или зарегистрируйтесь для ответа.
Facebook Twitter
- Форумы
- Что нового?
- Вход
- Регистрация
Сверху
Модальное диалоговое окно | WebReference
Bootstrap позволяет добавить модальное диалоговое окно на ваш сайт. Модальное — это диалоговое окно, которое получает фокус, в то время как остальная часть экрана затемняется. Это заставляет пользователя принять какие-то действия в диалоговом окне, прежде чем продолжить работать дальше.
Чтобы создать модальное окно, используйте класс .modal совместно с другими классами .modal-*, которые определяют каждый раздел модального окна.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <button type=»button» data-toggle=»modal» data-target=»#flipFlop»> Нажми на меня </button> <!— Модальное окно —> <div tabindex=»-1″ role=»dialog» aria-labelledby=»modalLabel» aria-hidden=»true»> <div role=»document»> <div> <div> <h5>Сандалия</h5> <button type=»button» data-dismiss=»modal» aria-label=»Закрыть»> <span aria-hidden=»true»>×</span> </button> </div> <div>Тип обуви с открытыми носками.</div> <div> <button type=»button» data-dismiss=»modal»>Закрыть</button> </div> </div> </div> </div> <script src=»https://code.
Размер модального окна
Маленькое окно
Для маленького модального диалогового окна, добавьте класс .modal-sm к .modal-dialog.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <button type=»button» data-toggle=»modal» data-target=»#smallShoes»> Нажми на меня </button> <!— Модальное окно —> <div tabindex=»-1″ role=»dialog» aria-labelledby=»modalLabelSmall» aria-hidden=»true»> <div> <div> <div> <h5>Маленькие туфли</h5> <button type=»button» data-dismiss=»modal» aria-label=»Закрыть»> <span aria-hidden=»true»>×</span> </button> </div> <div>Маленькие туфли обычно носят люди с маленькими ногами.
Большое окно
Для большого модального диалогового окна добавьте класс .modal-lg к .modal-dialog.
Убрать эффект затухания
Вы можете удалить класс .fade, чтобы избавиться от эффекта затухания при открытии и закрытии окна.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <button type=»button» data-toggle=»modal» data-target=»#largeShoes»> Нажми на меня </button> <!— Модальное окно —> <div tabindex=»-1″ role=»dialog» aria-labelledby=»modalLabelLarge» aria-hidden=»true»> <div> <div> <div> <h5>Чистка обуви</h5> <button type=»button» data-dismiss=»modal» aria-label=»Закрыть»> <span aria-hidden=»true»>×</span> </button> </div> <div>Уберите эффект затухания отполировав свою обувь!</div> </div> </div> </div> <script src=»https://code.
Последнее изменение: 12.03.2020
jquery — Close Bootstrap Modal
Вы можете увидеть эту ссылку, но если эта ссылка была удалена, прочитайте это описание:
Вызовите модальное окно с идентификатором myModal с помощью одной строки JavaScript:
$('#myModal').modal(options)
Параметры
Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , например data-backdrop=»» .
|-----------|--------------|---------|-------------------------------| | Имя | Тип | По умолчанию| Описание | |-----------|--------------|---------|-----------------| | фон | логическое или | правда | Включает элемент модального фона. | | | строка | | В качестве альтернативы укажите static для | | | «статический» | | фон, который не закрывает модальное окно | | | | | по щелчку.| | | | | | | клавиатура | логический | правда | Закрывает модальное окно при нажатии клавиши escape.| | | | | | | фокус | логический | правда | Ставит фокус на модальное окно при инициализации| | | | | | | показать | логический | правда | Показывает модальное окно при инициализации. | |-----------|--------------|---------|-----------------|
Методы
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход. Они вернулись вызывающей стороне сразу после начала перехода, но до его завершения. Кроме того, вызов метода переходного компонента будет игнорируется.
Дополнительную информацию см. в нашей документации по JavaScript.
.modal(options)
Активирует ваш контент как модальный. Принимает необязательный объект опций.
$('#myModal').modal({
клавиатура: ложь
})
.modal(‘toggle’)
Вручную переключает модальное окно.
Возвращает вызывающему объекту до того, как модальное окно действительно было показано или скрыто (т. е. до того, как произошло событие visible.bs.modal или hidden.bs.modal).
$('#myModal').modal('переключить')
.modal(‘show’)
Вручную открывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно действительно было показано (т. е. до того, как произошло событие visible.bs.modal).
$('#myModal').modal('показать')
.modal(‘hide’)
Вручную скрывает модальное окно. Возвращает вызывающему объекту до того, как модальное окно было фактически скрыто (т. е. до того, как произошло событие hidden.bs.modal).
$('#myModal').modal('скрыть')
.modal(‘handleUpdate’)
Вручную изменить положение модального окна, если высота модального окна изменяется, когда оно открыто (т. е. в случае появления полосы прокрутки).
$('#myModal').modal('handleUpdate')
.modal(‘dispose’)
Уничтожает модальное окно элемента.
Events
Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям. Все модальные события запускаются в самом модальном (т.е. в **). Тип Описание
|----------------|------------------------------------------------------------------------------| | Тип события | Описание | |----------------|------------------------------------------------------------------------------| | показать.bs.modal | Это событие срабатывает немедленно, когда экземпляр **show** | | | метод называется. Если это вызвано щелчком, выбранный элемент | | | доступен как свойство **relatedTarget** события. | | | | | показанный.bs.modal | Это событие запускается, когда модальное окно становится видимым | | | пользователь (будет ждать завершения переходов CSS). Если | | | вызванный щелчком, элемент, по которому щелкнули, доступен как | | | Свойство **relatedTarget** события.| | | | | скрыть.bs.modal | Это событие запускается немедленно, когда экземпляр **hide** | | | был вызван метод. | | | | | скрытый.bs.modal| Это событие запускается, когда модальное окончание скрыто | | | от пользователя (будет ждать завершения переходов CSS). | |----------------|------------------------------------------------------------------------------| $('#myModal').on('hidden.bs.modal', функция (e) { // сделай что-нибудь... })
|
| | |
| скрыть.bs.modal | Это событие запускается немедленно, когда экземпляр **hide** |
| | был вызван метод. |
| | |
| скрытый.bs.modal| Это событие запускается, когда модальное окончание скрыто |
| | от пользователя (будет ждать завершения переходов CSS). |
|----------------|------------------------------------------------------------------------------|
$('#myModal').on('hidden.bs.modal', функция (e) {
// сделай что-нибудь...
})
Как закрыть модальное окно, когда пользователь щелкает за его пределами, с помощью ванильного JavaScript — Techstacker
Узнайте, как закрыть модальное окно или любой элемент пользовательского интерфейса, когда пользователь щелкает за его пределами, с помощью ванильного JavaScript.
Модальные всплывающие окна обычно раздражают, особенно когда они занимают весь экран. Это особенно раздражает, когда они происходят в течение нескольких секунд после того, как вы заходите на сайт. Это глупо и это плохой UX-дизайн.
Некоторые веб-сайты поднимаются на следующий уровень и решают сделать модальную кнопку закрытия (X) настолько маленькой и странно расположенной, что у вас будет достаточно времени, чтобы по-настоящему разозлиться, решая головоломку, и вы можете забыть, зачем вы вообще зашли на этот веб-сайт.
Давайте исправим.
HTML: простое модальное окно
Добавьте в документ HTML следующий код:
<дел> <кнопка>Х Подписаться на мою рассылку
Получите доступ к эксклюзивному контенту, который доступен только в моем списке рассылки
CSS: простое оформление модальных окон и кнопок
.modal {
набивка: 2рем;
граница: 1px сплошная #eee;
ширина: максимальное содержание;
положение: фиксированное;
справа: 0;
внизу: 0;
максимальная ширина: 100%;
}
.button-close-modal {
дисплей: блок;
размер шрифта: 2rem;
вес шрифта: полужирный;
поле слева: авто;
} JavaScript: обнаружение всех щелчков по документу
Следующий код JavaScript закроет модальное окно, если пользователь щелкнет за пределами модального элемента или нажмет кнопку X:
document.
addEventListener(
"клик",
функция (событие) {
// Если пользователь либо нажимает кнопку X, либо щелкает за пределами модального окна, затем закрываем модальное окно, вызывая closeModal()
если (
event.target.matches(".button-close-modal") ||
!event.target.closest(".modal")
) {
закрытьМодал()
}
},
ЛОЖЬ
)
функция closeModal() {
document.querySelector(".modal").style.display = "нет"
} Получите весь код здесь.
Что происходит в коде:
- Во-первых, мы настраиваем прослушиватель событий щелчка на объекте
документа. Это означает, что регистрируется любой щелчок в любом месте HTML-документа, и теперь мы можем запускать функции для каждого щелчка внутри фигурных скобок{ .. }. - Затем мы устанавливаем два способа/цели для закрытия модального окна, либо нажатием кнопки, либо щелчком за пределами модального окна.
- Внутри , если в операторе мы говорим «если цель либо соответствует кнопке (
соответствует(".
