Уроки 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=““ 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=““ integrity=“sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n“ crossorigin=“anonymous“][/script] [script src=“@“ integrity=“sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo“ crossorigin=“anonymous“][/script] [script src=““ integrity=“sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6“ crossorigin=“anonymous“][/script] [/body] [/html] *** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода - сделайте наоборот 😊 Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: 1) Урок на сайте Wiseplat: ✔ Сообщество программистов: ✔ —----------- Вступай в группу Вк - 🚀 Группа FaceBook - Инстаграм Wiseplat: Instagram: Twitter - *********