Модальное окно (lightbox) на css
Содержание:
- Содержание
- Внешний вид и содержание
- Шаг 3. Добавляем CSS для модального окна
- Модальная Галерея Изображений
- CSS
- Ajax форма обратной связи
- HTML и CSS код модального окна
- Редактирование файла style.css.
- Разметка HTML
- Использование
- Активируйте модальные окна с помощью data-* атрибутов
- Используйте сетку Bootstrap внутри модальных окон
- Как работает?
- Модальное окно
- Эффект затухания
Содержание
атрибут HTML не имеет никакого эффекта в Bootstrap модальные глаголы. для достижения такого же эффекта, использовать некоторые пользовательские JavaScript:
Открытие нескольких модальных окон не поддерживается
Не открывайте новое модальное окно пока другое всё ещё открыто. Отображение более одного модального окна требует написание дополнительного пользовательского кода.
Размещение разметки модального окна
Всегда старайтесь поместить разметку модального окна в верхнем уровне HTML-документа, чтобы избежать влияния других элементов на внешний вид модального окна и/или его функциональность.
Предостережения для мобильных устройств
Существуют некоторые предостережения относительно использования глагола на мобильных устройствах. для деталей.
Демо
Переключить модальное окно через JavaScript нажав на кнопку ниже. Он будет скользить вниз и исчезают в верхней части страницы.
Launch demo modal
Сделать модальности можно
Не забудьте добавить и , ссылаясь на модальное окно Заголовок, чтобы , и к сам.
Кроме того, вы можете дать описание вашего модальное окно диалог с на .
Встраивание видео YouTube
Встраивание видео YouTube в модальности требует дополнительных JavaScript не в Bootstrap чтобы автоматически остановить воспроизведение и многое другое. Ознакомиться с этой полезной переполнение стека пост для получения дополнительной информации.
Внешний вид и содержание
Вскользь коснусь внешнего вида.
На небольших экранах диалоговое окно должно занимать 100% его размера. Если ваш диалог будет большим:
- Его будет легче «нащупать». Дело в том, что пользователь может взаимодействовать со страницей следующим образом: он водит пальцем по дисплею, а программа чтения с экрана озвучивает то, что в данный момент находится под пальцем.
- Пользователю гарантированно не будут озвучиваться элементы «под ним». Иначе, например, VoiceOver на iPad может озвучивать отдельные фрагменты страницы под модальным окном даже «сквозь» оверлей блокирующий доступ указателю.
- Вы скроете прокрутку фона на некоторых устройствах при прокрутке контента в диалоговом окне.
- Удобнее для одной руки. Если окно растянуто на всю высоту – то у вас есть возможность прижать кнопки управления к нижней части дисплея. Туда намного проще дотянуться одной рукой пользователям современных смартфонов.
- Больше места для контента на устройствах с маленьким экраном, таких как iPhone SE.
Заголовок обязателен
У модального окна, как у любой обычной страницы, должен быть свой заголовок. Короткий, точно описывающий его предназначение. Наличие заголовка намного упрощает восприятие пользователем.
Настоятельно рекомендуется использовать для заголовка тег .
Но просто добавить заголовок в диалоговое окно недостаточно. Их нужно ещё и логически «связать». Сделать это можно с помощью атрибута следующим образом:
Теперь, при попадании пользователя в диалоговое окно, в случае с экранным диктором, будет зачитан не только факт наличия диалога, но и его заголовок.
Статический контент должен быть связан с окном
Если в вашем диалоговом окне есть какое-то не интерактивное содержание, например, абзац текста, его стоит связать с диалогом подобно заголовку. Иначе, в некоторых случаях программы чтения с экрана не будут озвучивать такой контент.
Делается это атрибутом :
Если в вашем диалоговом окне много контента, тогда стоит обернуть его в один и связать элемент диалога уже с ним:
Важно! Заголовок и любые кнопки не относящиеся к содержимому, а служащие для управления диалоговым окном, не должны быть включены в элемент на который указывает. Они должны быть вынесены отдельно:
Интерактивные элементы связывать не нужно
Есть другой сценарий, когда содержимое вашего окна состоит из формы без предшествующего ей текста. В таком случае нет необходимости связывать форму с окном:
Элементы формы являются интерактивными. И они будут озвучены скринридером, когда пользователь начнёт с ними взаимодействовать.
Если скомбинировать и статический текст и форму:
Шаг 3. Добавляем CSS для модального окна
Я пометила комментариями основные CSS-свойства. Вы можете изменить цвета, размеры и отступы чтобы подогнать внешний вид элементов под дизайн своего сайта.
PHP
/*CSS-свойства для заднего фона*/
.iw-modal {
opacity: 0; /*изначально этот блок должен быть прозрачным*/
background: rgba(0,0,0,0.7); /*задаём цвет фона*/
pointer-events: none; /*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
transition: all 0.5s ease;
margin: 0;
padding: 0;
}
.iw-modal:target {
opacity: 1; /*при клике блок становится видимым*/
pointer-events: auto; /*теперь по блоку можно кликать мышкой*/
overflow-y: auto; /*прокрутка по вертикли страницы*/
}
.iw-modal-wrapper {
margin:auto; /*выравниваем модальное окно по центру по горизонтали*/
margin-top:25vh; /*отступ сверху можно задавать в px, % или vh*/
}
/*CSS-свойства для блока, содержащего контент модального окна */
.iw-CSS-modal-inner {
position: relative;
background: #fff; /*цвет фона*/
border: 1px solid #ccc; /*цвет и толщина рамки*/
border-radius: 0px; /*радиус скругления углов*/
}
/*CSS-свойства заголовка модального окна */
.iw-modal-header {
padding: 15px;/*внутренний отступ*/
background:#f1f1f1;/*цвет фона*/
position:relative;
}
.iw-modal-title {
font-size: 18px; /*размер шрифта*/
color:#555; /*цвет шрифта*/
font-weight:bold; /*жирность шрифта*/
line-height: 1.5; /*высота строки*/
margin-top: 0;
margin-bottom: 0;
}
/*CSS для кнопки закрытия*/
.iw-close {
position:absolute;
top:15px; /*отступ сверху*/
right:10px; /*отступ справа*/
font-size: 24px; /*размер шрифта*/
color: #555; /*цвет шрифта*/
text-decoration: none;
}
.iw-close:hover, .iw-close:focus {
color: #000; /*цвет шрифта при наведении*/
cursor: pointer;
}
/*CSS для блока с текстом*/
.iw-modal-text {
padding: 15px 20px; /*внутренний отступ*/
}
/**MEDIA**/
@media (min-width: 550px) {
.iw-modal-wrapper {
max-width: 500px;
}
}
|
1 |
/*CSS-свойства для заднего фона*/ .iw-modal{ opacity;/*изначально этот блок должен быть прозрачным*/ backgroundrgba(,,,0.7);/*задаём цвет фона*/ pointer-eventsnone;/*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/ positionfixed; top; right; bottom; left; z-index9999; transitionall0.5sease; margin; padding; } .iw-modaltarget{ opacity1;/*при клике блок становится видимым*/ pointer-eventsauto;/*теперь по блоку можно кликать мышкой*/ overflow-yauto;/*прокрутка по вертикли страницы*/ } .iw-modal-wrapper{ marginauto;/*выравниваем модальное окно по центру по горизонтали*/ margin-top25vh;/*отступ сверху можно задавать в px, % или vh*/ } /*CSS-свойства для блока, содержащего контент модального окна */ .iw-CSS-modal-inner{ positionrelative; background#fff; /*цвет фона*/ border1pxsolid#ccc; /*цвет и толщина рамки*/ border-radius0px;/*радиус скругления углов*/ .iw-modal-header{ padding15px;/*внутренний отступ*/ background#f1f1f1;/*цвет фона*/ positionrelative; } .iw-modal-title{ font-size18px;/*размер шрифта*/ color#555; /*цвет шрифта*/ font-weightbold;/*жирность шрифта*/ line-height1.5;/*высота строки*/ margin-top; margin-bottom; } .iw-close{ positionabsolute; top15px;/*отступ сверху*/ right10px;/*отступ справа*/ font-size24px;/*размер шрифта*/ color#555; /*цвет шрифта*/ text-decorationnone; } .iw-closehover,.iw-closefocus{ color#000; /*цвет шрифта при наведении*/ cursorpointer; } .iw-modal-text{ padding15px20px;/*внутренний отступ*/ } @media(min-width550px){ .iw-modal-wrapper{ max-width500px; } } |
Сохраняем все файлы, в которые вы вносили изменения, обновляем страницу сайта и любуемся своим CSS модальным окном.
Модальная Галерея Изображений
Нажмите на изображение, чтобы отобразить его в полном размере:
×
Пример
<div class=»w3-row-padding»> <div class=»w3-container w3-third»>
<img src=»img_snowtops.jpg» style=»width:100%» onclick=»onClick(this)»>
</div> <div class=»w3-container w3-third»> <img
src=»img_lights.jpg» style=»width:100%» onclick=»onClick(this)»>
</div> <div class=»w3-container w3-third»> <img
src=»img_mountains.jpg» style=»width:100%» onclick=»onClick(this)»>
</div></div><div id=»modal01″ class=»w3-modal» onclick=»this.style.display=’none'»>
<img class=»w3-modal-content» id=»img01″ style=»width:100%»></div><script>function
onClick(element) { document.getElementById(«img01»).src = element.src;
document.getElementById(«modal01»).style.display = «block»;}</script>
CSS
.fond {
position:absolute;
padding-top:45px;
top:0;
left:0;
right:0;
bottom:0;
background-color:#f8b334;
}
.mymagicoverbox {
display:inline-block;
color:#ffffff;
padding:10px;
margin:10px;
cursor:pointer;
font-weight:300;
font-family:'Roboto';
}
.mymagicoverbox_fenetre {
z-index:9999;
position:fixed;
margin-left:50%;
top:100px;
text-align:center;
display:none;
padding:5px;
background-color:#ffffff;
color:#97BF0D;
font-style:normal;
font-size:20px;
font-weight:300;
font-family:'Roboto';
}
.mymagicoverbox_fenetreinterieur {
text-align:center;
overflow:auto;
padding:10px;
background-color:#ffffff;
color:#666666;
font-weight:400;
font-family:'Roboto';
font-size:17px;
border-top:1px solid #e7e7e7;
margin-top:10px
}
.mymagicoverbox_fermer {
color:#CB2025;
cursor:pointer;
font-weight:400;
font-size:14px;
font-style:normal
font-family:'Roboto';
}
#myfond_gris {
display: none;
background-color:#000000;
opacity:0.7;
width:100%;
height:100%;
z-index:9998;
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
}
Ajax форма обратной связи
Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.
Кнопка, по нажатию на которую будет открываться модальное окно:
<a class="mainButton" href="#modal">Оставить заявку</a>
Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой.
Теперь приведу код формы и блока, на котором будет располагаться форма:
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc"> <div class="remodalBorder"> <img src="img/sendico.png"> <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button> <form id="form"> <h2 id="modal1Title">Оставьте ваши контактные данные и наш консультант свяжется с вами</h2> <input type="text" class="putName" name="name" placeholder="Ваше ваше имя" required> <input name="phone" type="tel" class="putPhone" placeholder="Введите номер телефона" required> <input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ"> <input type="hidden" name="formData" value="Заявка с сайта"> <a style="font-size:12px; text-align:center; color:rgba(255, 255, 255, .3);" href="#">Хочу такую форму на свой сайт</a> </form> </div> </div>
Добавив стили, выглядеть это стало так:
Между тегами head подключаем стили:
<link rel="stylesheet" href="css/remodal.css"> <link rel="stylesheet" href="css/remodal-default-theme.css">
А перед закрывающимся тегом body — добавляем скрипты:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="dist/remodal.min.js"></script> <script src="js/script.js"></script>
Script.js — это скрипт для обработки формы. Тот самый Ajax, который позволяет нам осуществить всю процедуру без перезагрузки страницы:
$(document).ready(function () {
$("form").submit(function () {
// Получение ID формы
var formID = $(this).attr('id');
// Добавление решётки к имени ID
var formNm = $('#' + formID);
$.ajax({
type: "POST",
url: 'mail.php',
data: formNm.serialize(),
success: function (data) {
// Вывод текста результата отправки
$(formNm).html(data);
},
error: function (jqXHR, text, error) {
// Вывод текста ошибки отправки
$(formNm).html(error);
}
});
return false;
});
});
Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):
<?php
if ($_SERVER == "POST") {
if (isset($_POST)) {$name = $_POST;}
if (isset($_POST)) {$phone = $_POST;}
// if (isset($_POST)) {$email = $_POST;}
if (isset($_POST)) {$formData = $_POST;}
$to = "site@sitename.com"; /*Укажите адрес, га который должно приходить письмо*/
$sendfrom = "support@sitename.ru"; /*Укажите адрес, с которого будет приходить письмо, можно не настоящий, нужно для формирования заголовка письма*/
$headers = "From: " . strip_tags($sendfrom) . "\r\n";
$headers .= "Reply-To: ". strip_tags($sendfrom) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
$subject = "$formData";
$message = "$formData
<b>Имя пославшего:</b> $name
<b>Телефон:</b> $phone";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true')
{
echo '<center>
Спасибо за отправку вашего сообщения!
</center>';
}
else
{
echo '<center>
<b>Ошибка. Сообщение не отправлено!</b>
</center>';
}
} else {
http_response_code(403);
echo "Попробуйте еще раз";
}?>
Пожалуйста, не забывайте менять адреса электронной почты на свои.
Вот такая ajax форма получилась. Извините, что не пытался объяснить подробно, как делался каждый элемент. Просто хотелось дать готовый результат, а описывать все анимации, появления — нет никакого смысла. Качайте исходник и внедряйте на свой сайт. А на сегодня — все. Всем удачи!
Обновленная версия статьи находится тут
HTML и CSS код модального окна
HTML разметка модального окна:
<div id="openModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Название</h3>
<a href="#close" title="Close" class="close">×</a>
</div>
<div class="modal-body">
<p>Содержимое модального окна...</p>
</div>
</div>
</div>
</div>
Ссылка, с помощью которой осуществляется открытие модального окна:
<!-- openModal - id модального окна (элемента div) --> <a href="#openModal">Открыть модальное окно</a>
CSS модального окна:
/* стилизация содержимого страницы */
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
}
/* свойства модального окна по умолчанию */
.modal {
position: fixed; /* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5); /* цвет фона */
z-index: 1050;
opacity: 0; /* по умолчанию модальное окно прозрачно */
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in; /* анимация перехода */
pointer-events: none; /* элемент невидим для событий мыши */
margin: 0;
padding: 0;
}
/* при отображении модального окно */
.modal:target {
opacity: 1; /* делаем окно видимым */
pointer-events: auto; /* элемент видим для событий мыши */
overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 30px auto; /* для отображения модального окна по центру */
}
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
outline: 0;
}
@media (min-width: 768px) {
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}
/* свойства для заголовка модального окна */
.modal-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.modal-title {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
overflow: auto;
}
Если вам необходимо убрать скролл страницы после отображения модального окна, то к элементу нужно добавить CSS-свойство со значением . А после скрытия модального окна данное свойство убрать у элемента . Данное действие можно осуществить только с помощью JavaScript:
document.addEventListener("DOMContentLoaded", function(){
var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
console.log(scrollbar);
document.querySelector('').addEventListener('click',function(){
document.body.style.overflow = 'hidden';
document.querySelector('#openModal').style.marginLeft = scrollbar;
});
document.querySelector('').addEventListener('click',function(){
document.body.style.overflow = 'visible';
document.querySelector('#openModal').style.marginLeft = '0px';
});
});
Редактирование файла style.css.
В файле style.css прописываем стили для нашего модального окна.
.modal_div {
width: 300px;
height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
left: 50%; /* пoлoвинa экрaнa слевa */
margin-top: -150px;
margin-left: -150px; /* oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo */
display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
padding: 20px 10px;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
.modal_close {
width: 21px;
height: 21px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
/* Пoдлoжкa */
#overlay {
z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
position:fixed; /* всегдa перекрывaет весь сaйт */
background-color:#000; /* чернaя */
opacity:0.8; /* нo немнoгo прoзрaчнa */
-moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
filter:alpha(opacity=80);
width:100%;
height:100%; /* рaзмерoм вo весь экрaн */
top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
left:0;
cursor:pointer;
display:none; /* в oбычнoм сoстoянии её нет) */
}
Разметка HTML
Структура разметки достаточно проста. Имеется одна панель с кнопками и два всплывающих элемента. Каждый содержит перекрывающий слой в элементе и некоторое содержание с кнопкой для закрытия окна.
<html lang="ru" >
<head>
<meta charset="utf-8" />
<title>Модальное окно на CSS3 | Материалы сайта RUSELLER.COM</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/modal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Панель с кнопками -->
<div class="main">
<div class="panel">
<a href="#login_form" id="login_pop">Войти</a>
<a href="#join_form" id="join_pop">Регистрация</a>
</div>
</div>
<!-- Форма №1 для модального окна -->
<a href="#x" class="overlay" id="login_form"></a>
<div class="popup">
<h2>Здравствуй, Гость!</h2>
<p>Вводи свой псевдоним и пароль</p>
<div>
<label for="login">Псевдоним</label>
<input type="text" id="login" value="" />
</div>
<div>
<label for="password">Пароль</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Войти" />
<a class="close" href="#close"></a>
</div>
<!-- Форма №2 для модального окна -->
<a href="#x" class="overlay" id="join_form"></a>
<div class="popup">
<h2>Регистрация</h2>
<p>Нужно о себе кое-что рассказать</p>
<div>
<label for="email">Псевдоним (email)</label>
<input type="text" id="email" value="" />
</div>
<div>
<label for="pass">Пароль</label>
<input type="password" id="pass" value="" />
</div>
<div>
<label for="firstname">Имя</label>
<input type="text" id="firstname" value="" />
</div>
<div>
<label for="lastname">Фамилия</label>
<input type="text" id="lastname" value="" />
</div>
<input type="button" value="Регистрация" /> или <a href="#login_form" id="login_pop">Войти</a>
<a class="close" href="#close"></a>
</div>
</body>
</html>
Использование
Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или JavaScript. Он также добавляет в класс для преодоления поведения при прокрутке по умолчанию, и создает зону для клика вне модального элемента, нужную для закрытия открытых модальных элементов, класс .
Через атрибуты
Активируйте модальный элемент без JavaScript. Установите в контролирующем элементе, таком как кнопка, наряду с или , для обращения к функциональности “toggle” для частного модального элемента.
Параметры
Параметры можно передавать атрибутами или JavaScript. Для использования атрибутов добавьте имя параметра в , например .
| Название | Тип | По умолч. | Описание |
|---|---|---|---|
| backdrop | boolean or the string | true | Подключает модальный элемент с затемненным фоном. Еще – задает для фона, который не закрывает модальный элемент по клику на фоне. |
| keyboard | boolean | true | Закрывает модальный элемент по нажатию ESC. |
| focus | boolean | true | Фокусируется на модальном элементе по инициализации. |
| show | boolean | true | Показывает модальный элемент по инициализации. |
Методы
Асинхронные методы и переходы
Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
Активирует содержимое как модальный элемент. Принимает параметров.
Вручную изменяет состояние модального элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт. (т.е. до того, как произойдет событие или ).
Вручную открывает модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие ).
Вручную прячет модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие ).
Вручную обновляет позицию модального элемента, если высота его изменяется во время открытия (т.е. в случае возникновения полосы прокрутки).
Уничтожает модальный элемент.
События
Модальный элемент в Bootstrap имеет несколько событий для встраивания в функциональность. Все события модальных элементов запускаются внутри самих элементов (т.е. в ).
| Тип события | Описание |
|---|---|
| show.bs.modal | Это событие запускается немедленно, когда экземпляр метода вызван. Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события . |
| shown.bs.modal | Это событие запускается, когда модальный элемент сделан видимым юзеру (будет ждать завершения переходов CSS). Если оно вызвано кликом, элемент, на который кликнули, доступен как свойство события . |
| hide.bs.modal | Это событие запускается немедленно, когда экземпляр метода вызван. |
| hidden.bs.modal | Это событие запускается, когда модальный элемент больше не является скрытым (будет ждать завершения переходов CSS). |
| hidePrevented.bs.modal | Это событие запускается, когда отображается модальное окно, его фон является статическим , и выполняется щелчок за пределами модального окна или нажатие клавиши escape с параметром клавиатуры или , установленным в значение . |
Активируйте модальные окна с помощью data-* атрибутов
Вы можете активировать модальное окно Bootstrap, нажав на кнопку или ссылку через data-* атрибуты без написания кода JavaScript. Посмотрите на следующий пример, чтобы увидеть, как это работает:
<!-- HTML-код кнопки (триггер модального окна)-->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Запустить модальное окно</a>
<!-- HTML-код модального окна -->
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Подтверждение</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Вы хотите сохранить изменения в этом документе перед закрытием?</p>
<p class="text-secondary"><small>Если вы не сохраните, ваши изменения будут потеряны.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить изменения</button>
</div>
</div>
</div>
</div>
Приведенный выше пример запускает модальное окно при нажатии кнопки «Запустить модальное окно». Для лучшего понимания давайте рассмотрим этот код по частям.
Используйте сетку Bootstrap внутри модальных окон
Вы также можете использовать сетку Bootstrap в модальных окнах. Просто используйте класс для создания строк и классы , , , и для создания столбцов внутри элемента с классом . Давайте посмотрим на пример:
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Отправить сообщение</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Имя</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>Фамилия</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label>Комментарий</label>
<textarea class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Отправить сообщение</button>
</div>
</div>
</div>
</div>
Как работает?
Псевдо селектор изменяет стиль целевого элемента. Комбинирование указание ссылкой на элемент с : и изменением видимости/прозрачности дает в итоге механизм для вывода/скрытия окна. Для улучшения анимации, которая становится дерганной при использовании , сочетаются :, и
.modal {
opacity: 0;
pointer-events: none;
}
.modal:target {
opacity: 1;
pointer-events: auto;
}
Модальное окно имеет две части: контейнер и содержание. В идеале, контейнер должен генерироваться с помощью псевдо элемента, но на момент написания урока данный метод не работает. Контейнер растягивается на всю страницу и притеняет фон с использованием . Большое значение свойства размещает модальное окно поверх страницы.
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
…
}
Содержание позиционируется посередине и «приглаживается» тенями, скругленными углами и градиентом.
Есть две анимации. Одна называется “bounce” («прыжок» — происходит масштабирование до немного большего размера, затем возвращается все к норме). Другая называется “minimise”, и она действует в обратном направлении. Для них используется комбинация трансформаций прозрачности контейнера.
Простая трансформация прозрачности:
.modal {
…
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
Анимация масштабирования, хотя и выполняется в 2D, использует для аппаратного ускорения. Чтобы сделать появление окна более реалистичным тени также анимируются, что создает нагрузку на производительность.
@-webkit-keyframes bounce {
0% {
-webkit-transform: scale3d(0.1,0.1,1);
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
55% {
-webkit-transform: scale3d(1.08,1.08,1);
-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
}
75% {
-webkit-transform: scale3d(0.95,0.95,1);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
}
100% {
-webkit-transform: scale3d(1,1,1);
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
}
@-webkit-keyframes minimise {
0% {
-webkit-transform: scale3d(1,1,1);
}
100% {
-webkit-transform: scale3d(0.1,0.1,1);
}
}
Для изменения анимации при открытии мы используем каскад и переписываем анимацию по умолчанию с использованием ::
.modal > div {
…
-webkit-animation: minimise 500ms linear;
}
.modal:target > div {
-webkit-animation-name: bounce;
}
Кнопка Закрыть является скрытой ссылкой со стилизованным псевдо-элементом ::, который масштабируется при наведении курсора мыши. Так как мы скрываем оригинальную ссылку, то нужно сделать «прыжок» через изменение состояния псевдо-элемента :. Методы традиционная обрезка, выравнивания текста и скрытия видимости не работают, поэтому используются и несколько специфических стилей для .
.modal a {
…
color: transparent;
}
.modal a:after {
content: 'X';
display: block;
…
}
.modal a:focus:after,
.modal a:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}
.modal a:focus:after {
outline: 1px solid #000;
}
Модальное окно
Для создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#okno:target {display: block;}
</style>
</head>
<body>
<div id="okno">
Всплывающее окошко!
</div>
<a href="#okno">Вызвать всплывающее окно</a>
</body>
</html>
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему и оформив:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#okno:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
</style>
</head>
<body>
<div id="okno">
Всплывающее окошко!<br>
<a href="#" class="close">Закрыть окно</a>
</div>
<a href="#okno">Вызвать всплывающее окно</a>
</body>
</html>
Попробовать »
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :
<div id="zatemnenie"> <div id="okno"> Всплывающее окошко!<br> <a href="#" class="close">Закрыть окно</a> </div> </div>
Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему и перенаправляем ссылку вызова окна на него.
У дочернего убираем (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#zatemnenie {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
}
#zatemnenie:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
</style>
</head>
<body>
<div id="zatemnenie">
<div id="okno">
Всплывающее окошко!<br>
<a href="#" class="close">Закрыть окно</a>
</div>
</div>
<a href="#zatemnenie">Вызвать всплывающее окно</a>
</body>
</html>
Попробовать »
Эффект затухания
Теперь давайте применим ещё одну фишку, а именно, эффект затухания. Для этого div-у модального окна припишем класс fade:
<div id="modal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2>Lorem Ipsum</h2> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat sem ipsum, ut faucibus nulla. Nullam mattis volutpat dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p> </div> </div>
Теперь открытие и закрытие нашего модального окна будет сопровождаться приятной для глаз анимацией. Данный эффект реализован в большей степень через CSS3.
