Уроки Bootstrap / Как сделать модальное окно, всплывающее окно на сайте

Привет друзья! Сегодня мы с вами рассмотрим, как создать модальное окно на вашем сайте, например, это будет всплывающее окошко, которое появляется, когда посетитель нажимает на кнопку. Такие модальные окна очень полезны, потому что вы полностью привлекаете внимание пользователя на именно этот раздел, где он, например, будет вводить свои данные для регистрации или входа на сайт в свой личный кабинет. 😊

Всплывающее окно на HTML и CSS – используется для вывода важных сообщений или ввода данных. Всплывающие окна делятся на два вида: обычные и модальные. Модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.

Для удобства пользователя не забывайте сделать кнопки закрытия модального окна и чтобы модальное окно могло закрываться, когда вы кликните мышкой вне этого окошка! 😊

- Уроки от #OlegShpagin 👨🏼‍💻
#урокиhtml #урокиbootstrap #урокиcss

Пример из видео:
[!DOCTYPE html]
[html lang="en"]
[head]
[meta charset="UTF-8"]
[title]PopUP windows[/title]
[link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"]

[/head]
[body]

[h1]Test PopUP[/h1]

[p]наш контент наш контент наш контент [/p]

[button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2"]Вызвать PopUP[/button]

[!-- Button trigger modal --]
[button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"]
Launch demo modal
[/button]

[!-- Modal --]
[div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"]
[div class="modal-dialog" role="document"]
[div class="modal-content"]
[div class="modal-header"]
[h5 class="modal-title" id="exampleModalLabel"]Modal title[/h5]
[button type="button" class="close" data-dismiss="modal" aria-label="Close"]
[span aria-hidden="true"]×[/span]
[/button]
[/div]
[div class="modal-body"]
...
[/div]
[div class="modal-footer"]
[button type="button" class="btn btn-secondary" data-dismiss="modal"]Close[/button]
[button type="button" class="btn btn-primary"]Save changes[/button]
[/div]
[/div]
[/div]
[/div]


[!-- Modal --]
[div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"]
[div class="modal-dialog" role="document"]
[div class="modal-content"]
[div class="modal-header"]
[h5 class="modal-title" id="exampleModalLabel"]Modal title 2[/h5]
[button type="button" class="close" data-dismiss="modal" aria-label="Close"]
[span aria-hidden="true"]×[/span]
[/button]
[/div]
[div class="modal-body"]
... Content 2
[/div]
[div class="modal-footer"]
[button type="button" class="btn btn-secondary" data-dismiss="modal"]Close[/button]
[button type="button" class="btn btn-primary"]Save changes[/button]
[/div]
[/div]
[/div]
[/div]

[script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"][/script]
[script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"][/script]
[script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"][/script]

[/body]
[/html]

*** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода - сделайте наоборот 😊

Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: https://wiseplat.org/

1) Урок на сайте Wiseplat:
✔ Сообщество программистов: https://wiseplat.org/
✔ -------------

Вступай в группу Вк - https://vk.com/wiseplat 🚀
Группа FaceBook - https://www.facebook.com/wiseplat/
Инстаграм Wiseplat: https://www.instagram.com/wiseplat/
Instagram: https://www.instagram.com/shpaginoleg/
Twitter - https://twitter.com/WiseplatSchool

********************************

Если Вам понравилась публикация, подписывайтесь на канал!

Ставьте лайки, тогда будем еще писать такой контент :)

Если есть вопросы или пожелания, то пишите, в комментариях.

********************************

Видео Уроки Bootstrap / Как сделать модальное окно, всплывающее окно на сайте канала Изучаем мир ИТ / Олег Шпагин / Программирование