Как сделать модальное окно на сайте, используя html, css и js

Опционные размеры

Модальные окна Имеют два дополнительных размера, доступные через классы модификатор, который будет размещен на .modal-dialog. Эти размеры ударом в некоторые точки останова, чтобы избежать горизонтальной полосы прокрутки на узких окнах.

Видео

Скрипт модального окна в сборе -> html + css

Мы недавно ввели новые фишки такие как… : для данного пункта у нас, кроме кода. который расположен ниже

Пример модального окна на отдельной странице

Скачать скрипт модального окна на странице со всеми скриптами

модальных окнах

<style>

#zatemnenie:target {

display: block;

}

#zatemnenie {

background: rgba(102, 102, 102, 0.68);

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

display: none;

z-index: 9999999999;

}

window {

position: absolute;

top: 50%;

left: 50%;

width: 400px;

border: 1px solid #cecece;

padding: 50px;

transform: translate(-50%,-50%);

background-color: #fafafa;

}

div#main_text a.close_window {

position: absolute;

right: 10px;

top: 4px;

border: none;

}

</style>

<a href="#zatemnenie">Самое простое модальное окно</a>

<div id="zatemnenie">

   <window>

       <a href="#close_window" class="close_window">X</a>

       Здесь текст, видео, ссылки, все, что вы захотите!

   </window>

</div>

Скопировать ссылку

Полноэкранное модальное окно

Другое переопределение — это возможность вывести модальное окно, охватывающее область просмотра пользователя, доступное через классы модификаторов, которые помещаются в .modal-dialog.

Класс Доступность
.modal-fullscreen Всегда
.modal-fullscreen-sm-down Меньше 576px
.modal-fullscreen-md-down Меньше 768px
.modal-fullscreen-lg-down Меньше 992px
.modal-fullscreen-xl-down Меньше 1200px
.modal-fullscreen-xxl-down Меньше 1400px

Использование

В модальное окно плагин переключает ваш скрытый Контент по требованию, через атрибуты данных или JavaScript. Он также добавляет .modal-open на <body> по умолчанию прокрутка поведение и создает .modal-backdrop, чтобы обеспечить щелкните область для увольнения показаны модальные глаголы при нажатии вне модальное окно.

С помощью данных атрибутов

Активируйте модальное окно без записи JavaScript. Набор data-toggle="modal" на элемент контроллера, кнопки, вместе с data-target="#foo" или href="#foo", чтобы предназначаться для определенного модальное окно для переключения.

Через JavaScript

Вызов модальное окно с кодом myModal С одной строки JavaScript:

Варианты

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-, а на data-backdrop="".

Имя Тип По умолчанию Описание
backdrop boolean or the string 'static' true Включает в себя модальное окно-фон элемента. Кроме того, укажите static на фоне которого не закрыть модальное окно по щелчку.
keyboard boolean true Замыкает модальное окно При нажатии клавиши Escape
show boolean true Показывает модальное окно При инициализации.

modal(options)

Активирует ваш Контент в модальное окно. Принимает необязательный варианты object.

modal(‘toggle’)

Переключение вручную на модальное окно. Возвращает абоненту до модальное окно фактически было показано или скрыто (т. е. shown.bs.modal или hidden.bs.modal события).

modal(‘show’)

Вручную открывает модальное окно. Возвращает абоненту до модальное окно фактически было показано (т. е. shown.bs.modal события).

modal(‘hide’)

Вручную скрывает модальное окно. Возвращает абоненту до модальное окно На самом деле был скрытым (т. е. hidden.bs.modal события).

События

Bootstrap модальное окно класс предоставляет несколько событий для навески модальное окно функциональности. Все модальное окно события обстреляли модальное окно сама по себе (т. е. <div class="modal">).

Тип События Описание
show.bs.modal Это событие возникает сразу же, когда show способ экземпляра называется. Если вызываемое щелчком, щелчке элемент, как relatedTarget свойство события.
shown.bs.modal Это событие запускается, когда модальное окно стала видимой для пользователя (будет ждать CSS переходы для завершения). Если вызываемое щелчком, щелчке элемент как relatedTarget свойство события.
hide.bs.modal Это событие сразу же выполняется, когда вызывается экземпляр метода hide.
hidden.bs.modal Это событие запускается, когда модальное окно закончил быть скрыта от пользователя (будет ждать CSS переходы для завершения).

Теги