Модальное окно joomla с помощью bootstrap
При использовании bootstrap, необходимы некоторые условия: шаблон joomla должен быть на бутстрапе или просто подключить этот фреймворк к своему шаблону joomla.
Достаточно скопировать код и вставить в статью в режиме html, как показано на сайте разработчика. Я немного изменил этот код на русские заголовки.
<!-- Button trigger modal --> <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Открыть модально </button></p> <!-- Modal --> <div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" tabindex="-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Заголовок окна</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">Закрыть</button> <button type="button" class="btn btn-primary">Сохранить</button></div> </div> </div> </div>
Там же можно найти еще много различных компонентов для отображения информации в модальном окне.
Есть и другие, более сложные возможности сделать тоже самое, например с помощью php, jquery и пр.
Пожалуй на этом стоит остановиться. Это наиболее простые и доступные варианты не только для joomla, но и других cms.
На этом пока все.
Осторожнее с модальными окнами, вызываемыми системой
Есть два типа модальных окон: вызываемые пользователем и вызываемые системой:
- Те, что вызваны пользователем, появляются на экране лишь тогда, когда человек сам этого хочет (например, нажимает на кнопку). В этом случае пользователь понимает, почему появляется окно.
- Те окна, вызываемые системой, которые лишь прерывают задачу, выполняемую человеком. Одна из самых больших проблем с таким типом модальности заключается в том, что эти окна отвлекают пользователей от того, что они делали до появления окна. Человек может даже не понять, почему оно всплыло.
Дизайнеры обычно используют такие окна в рекламных целях. Такие окна прерывают пользователя и заставляют его выполнить какое-либо определенное действие. “Незваные” окна часто производят плохое впечатление на пользователей — люди инстинктивно ищут кнопку “закрыть”. Такие окна считаются раздражающими и неуместными.
Внезапное модальное окно с формой подписки на рассылку
Лучше всего будет ограничить появление окон, вызываемых системой, и оставить только те, что управляются пользователем, либо же оставить их в случае экстренных сообщений. Во всех остальных случаях информацию можно подать и в другом виде, например прямо на странице без всплывающих окон. Тем самым пользователю дается свобода выбора в том, какой контент он хочет видеть и какие действия он хочет выполнить.
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:
Добавить верхний и нижний колонтитулы
Добавить класс для модального заголовка, модального тела и модального нижнего колонтитула:
Пример
<!— Модальное содержание —><div class=»modal-content»> <div class=»modal-header»> <span class=»close»>×</span> <h2>Модальный заголовок</h2> </div> <div class=»modal-body»> <p>Некоторый текст в модальном теле</p> <p>Какой-то другой текст…</p> </div> <div class=»modal-footer»> <h3>Модальный нижний колонтитул</h3> </div></div>
Стиль модального заголовка, тела и нижнего колонтитула, а также добавить анимацию (слайд в модели):
Пример
/* Модальный заголовок */.modal-header { padding: 2px 16px; background-color: #5cb85c; color: white;} /* Модальное тело */ .modal-body {padding: 2px 16px;}/* Модальный нижний колонтитул */.modal-footer { padding: 2px 16px; background-color: #5cb85c; color: white;}/* Модальное содержание */.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s}/* Добавить анимация */@keyframes animatetop { from {top: -300px; opacity: 0} to {top: 0; opacity: 1} }
Расширение функционала
Сейчас в моём модальном окне 149 строк кода если считать с пробелами. Но в конечном счёте, в моём проекте оно выросло до 367 строк и я рад этому. В начале моего проекта мне нужно было просто модальное окно. Но потом мне понадобилось загружать в него форму с contact form 7 по ajax, так же и отправлять данные, валидировать форму, переводить форму на 2 языка, проверять куки. И с XMC (название моего модального окна) это очень просто, потому что ты не ищешь элементы, ты не назначаешь множество переменных у тебя всё храниться внутри объекта и ты имеешь доступ к его данным. Вот например как я сделал ajax-запрос формы:
XMC.prototype.ajax = function () {
var mf = this;
var data = new Object();
data = JSON.stringify(data);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200){
mf.body.innerHTML = this.responseText;
mf.form = mf.body.firstChild;
mf.form = mf.form.querySelector('form');
mf.form.setAttribute('action', '#wpcf7-f41-o1');
var el = document.createElement('div');
el.id = 'wpcf7-f41-o1';
mf.body.appendChild(el);
if(window.screen.width < '758'){
var submit = mf.form.querySelector('input');
mf.btnClose.classList.add('btn');
mf.btnClose.setAttribute('type', 'button');
mf.btnClose.classList.add('btn-warning');
mf.btnClose.classList.add('rounded-circle');
submit.insertAdjacentElement('afterend', mf.btnClose);
}
mf.sendClickDelegate(mf.form);
mf.i18n();
}
};
xhttp.open('POST', localizationPreloader.adminUrl + "?action=fgb_modal_one_form", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("data="+data);
return this;
};
this.body — это основной блок «модалки», в которую по ajax подгружаю форму. А сам ajax я вызываю initBackground() в условии если задний слой равен null. Этим я достигаю того, что ajax формы делается один раз, а не каждый раз как происходит нажатие.
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.
Шаг 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 модальным окном.
Как сделать — Модальное окно
Узнать, как создать модальное окно с помощью CSS и JavaScript.
Модальный заголовок
Модальный нижний колонтитул
Шаг 1) Добавить HTML:
<!— Триггер/Открыть модальный —><button >Открыть модальный</button>
The <span> element with class=»close» should be used to close the modal.
Шаг 2) Добавить CSS:
/* Модальный (фон) */.modal <display: none; /* Скрыто по умолчанию */ position: fixed; /* Оставаться на месте */ z-index: 1; /* Сидеть на вершине */ left: 0; top: 0; width: 100%; /* Полная ширина */ height: 100%; /* Полная высота */ overflow: auto; /* Включите прокрутку, если это необходимо */ background-color: rgb(0,0,0); /* Цвет запасной вариант */ background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */ >
/* Модальное содержание/коробка */.modal-content <background-color: #fefefe; margin: 15% auto; /* 15% сверху и по центру */ padding: 20px; border: 1px solid #888; width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */>
/* Кнопка закрытия */ .close <color: #aaa; float: right; font-size: 28px; font-weight: bold;>
.close:hover, .close:focus <color: black; text-decoration: none; cursor: pointer;>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Добавить a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we’ll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Шаг 3) Добавить JavaScript:
// Получить модальныйvar modal = document.getElementById(«myModal»);
// Получить кнопку, которая открывает модальныйvar btn = document.getElementById(«myBtn»);
// Получить элемент <span>, который закрывает модальныйvar span = document.getElementsByClassName(«close»);
// Когда пользователь нажимает на кнопку, откройте модальныйbtn.onclick = function() <modal.style.display = «block»;>
// Когда пользователь нажимает на <span> (x), закройте модальное окноspan.onclick = function() <modal.style.display = «none»;>
// Когда пользователь щелкает в любом месте за пределами модального, закройте егоwindow.onclick = function(event) <if (event.target == modal) <modal.style.display = «none»; >>
Добавить верхний и нижний колонтитулы
Добавить класс для модального заголовка, модального тела и модального нижнего колонтитула:
Стиль модального заголовка, тела и нижнего колонтитула, а также добавить анимацию (слайд в модели):
/* Модальный заголовок */.modal-header <padding: 2px 16px; background-color: #5cb85c; color: white;>
/* Модальное тело */ .modal-body
/* Модальный нижний колонтитул */.modal-footer <padding: 2px 16px; background-color: #5cb85c; color: white;>
/* Модальное содержание */.modal-content <position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s>
How To Create a Modal Box
A modal is a dialog box/popup window that is displayed on top of the current page:
Open Modal
Hello World!
Modals are awesome!
Step 1) Add HTML:
<!— Trigger/Open The Modal —><button id=»myBtn»>Open Modal</button><!—
The Modal —><div id=»myModal» class=»modal»> <!— Modal
content —> <div class=»modal-content»>
<span class=»close»>×</span> <p>Some text in the
Modal..</p> </div></div>
Step 2) Add CSS:
/* The Modal (background) */.modal { display: none;
/* Hidden by default */ position: fixed; /* Stay in
place */ z-index: 1; /* Sit on top */
left: 0; top: 0; width: 100%; /*
Full width */
height: 100%; /* Full height */ overflow: auto; /*
Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4);
/* Black w/ opacity */
}/* Modal Content/Box */.modal-content { background-color: #fefefe;
margin: 15% auto; /* 15%
from the top and centered */
padding: 20px; border: 1px
solid #888; width: 80%; /* Could be more or less,
depending on screen size */}/* The Close Button */
.close { color: #aaa; float: right;
font-size: 28px; font-weight: bold;}
.close:hover,
.close:focus { color: black; text-decoration: none; cursor: pointer;}
Step 3) Add JavaScript:
// Get the modalvar modal = document.getElementById(«myModal»);
// Get the button that opens the modalvar btn = document.getElementById(«myBtn»);// Get the <span> element that closes the modalvar span =
document.getElementsByClassName(«close»);// When the user clicks
on the button, open the modal btn.onclick = function() { modal.style.display = «block»;}//
When the user clicks on <span> (x), close the modalspan.onclick =
function() {
modal.style.display = «none»;}// When the user clicks anywhere
outside of the modal, close itwindow.onclick = function(event) {
if (event.target == modal) { modal.style.display = «none»;
}}
Add Header and Footer
Add a class for modal-header, modal-body and modal-footer:
<!— Modal content —><div class=»modal-content»> <div
class=»modal-header»> <span class=»close»>×</span>
<h2>Modal Header</h2> </div> <div class=»modal-body»>
<p>Some text in the Modal Body</p> <p>Some other
text…</p> </div> <div class=»modal-footer»>
<h3>Modal Footer</h3> </div></div>
Style the modal header, body and footer, and add animation (slide in the modal):
/* Modal Header */.modal-header { padding: 2px 16px;
background-color: #5cb85c; color: white;}
/* Modal Body */
.modal-body {padding: 2px 16px;}/* Modal Footer */.modal-footer {
padding: 2px 16px; background-color: #5cb85c; color: white;}/* Modal Content */.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s}/* Add Animation */@keyframes animatetop { from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
❮ Previous
Next ❯
Использование ThickBox
Для создания модального окна (thickbox) нужно сделать две вещи:
-
Подключить скрипт ThickBox в PHP, вызвав функцию add_thickbox().
- Добавить в HTML ссылку (тег <a>), которая будет открывать модальное окно. Ссылка должна иметь:
- Класс thickbox: .
- В URL (атрибут href) нужно добавить дополнительные параметры запроса.
Параметры модального окна
Параметры запроса, которые добавляются в атрибут href ссылки открывающей модальное окно:
width
Ширина модального окна в пикселях.
height
Высота модального окна в пикселях.
TB_iframe
Указываем этот параметр и ставим ему значение true, если нужно загрузить контент указанной в URL ссылки в iframe. Т.е. URL будет выглядеть так: . Так контент http://example.com будем показан в модальном окне, в iframe.
В этом случае не нужно создавать сам элемент модального окна в HTML текущей страницы. ВП сделает все автоматом.
TB_inline
При использовании этого параметра вместо TB_iframe модальное окно покажет заранее созданный HTML элемент с id атрибутом указанным в параметре . Т.е
URL должен выглядеть так: .
В этом случае нужно создать DIV элемент с .
Контент модального окна
Важно чтобы контент внутри элемента находился внутри другого элемента. Выше это тег
.
Так неправильно:
Контент модального окна
Примеры создания модальных окон
#1 inline модальное окно, контент которого берется из текущей страницы
<?php add_thickbox(); ?> <div id="my-modal-id" style="display:none;"> <p> Контент модального окна. </p> </div> <a href="/?TB_inline&width=600&height=550&inlineId=my-modal-id" class="thickbox">Открыть модальное окно</a>
В результате получим такое модальное окно
#2 iframe модальное окно, контент которого берется по указанному URL
<?php add_thickbox(); ?> <a href="http://example.com?TB_iframe=true&width=600&height=550" class="thickbox">Открыть модальное окно</a>
#3 Вызов модального окна через JS функцию
Допустим, мы хотим использовать inline модальное окно, но контент этого окна заменять через AJAX. К сожалению, в API нет события когда модальное окно показывается (оно есть для iframe варианта, то не для inline).
Мы можем использовать JS функцию , она входит в состав апи.
Пример:
<?php add_thickbox(); ?> <div id="my-modal-id" style="display:none;"> <p> Контент модального окна. </p> </div> <a href="#" class="modal-init-js" onclick="return window.eduResModalShow(this);">Открыть модальное окно</a>
И теперь дополняющий JS код, где используется tb_show() и создается AJAX запрос.
jQuery(document).ready(function($){
var $modal = $('#my-modal-id');
var $modalCont = $modal.find('>*');
// шаг 1 - показ модального окна и выбор объкта редактирвоания
window.eduResModalShow = function(that){
tb_show( 'Заголовок модального окна', '/?TB_inline&inlineId=my-modal-id&width=700&height=500' );
// AJAX запрос для загрузки контента окна
$modalCont.html('загружаю...');
ajaxs( 'edu_results_modal_html', { user_id: 5 }, function(html){
$modalCont.html(html);
});
return false; // для ссылки
}
});
Заметки
JS код находится в файле
HTML код который создается автоматически
<div id='TB_title'> <div id='TB_ajaxWindowTitle'>Заголовок</div> <div id='TB_closeAjaxWindow'> <button type='button' id='TB_closeWindowButton'><span class='tb-close-icon'></span></button> </div> </div> <div id='TB_ajaxContent'></div>
Триггером модального окна может быть
HTML тег: <a>, <area> и <input>. Для инициализации каждый тег должен иметь class=»thickbox».
Для <a> URL и параметры указываются в атрибуте href. Для <area> и <input> в атрибуте alt.
// удалено jQuery( 'body' ).trigger( 'thickbox:removed' ); // закрыто jQuery( '#TB_window' ).trigger( 'tb_unload' ) // загружено jQuery( '#TB_window' ).trigger( 'thickbox:iframe:loaded' );
ИНСТРУКЦИЯ:
ШАГ 1: Подключаем CSS стили
<!DOCTYPE HTML> <html> <head> <title>...</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--===== RuBizCSS3Modal | Styles =====--> <link rel="stylesheet" type="text/css" href="rubizcss3modal.css"> </head> <body> <!--===== Контент ==--> </body> </html>
Если устанавливаете на WordPress, то рекомендую использовать плагин «Simple Custom CSS», куда и поместите стили RuBizCSS3Modal. Просто скопируйте все стили в файле «RuBizCSS3Modal.css» и поместите их в плагин «Simple Custom CSS». У меня есть видеоинструкция по работе с данным плагином .
ШАГ 2: Привязываем к элементу
<!--===== OPEN RuBizCSS3Modal =====-->
<a href="#open_RuBizCSS3Modal" class="RuBizCSS3Modal_button">
ОТКРЫТЬ RuBizCSS3Modal
</a>
<!--===== / OPEN RuBizCSS3Modal =====-->
Вы можете привязать как к отдельному слову или тексту, так и к любой картинке. Просто заключите нужный элемент в тег «a», что сверху. В моем случае, к окну привязан текст «ОТКРЫТЬ RuBizCSS3Modal».
Если хотите настроить два окна, например как у меня на этой странице, то дабавьте к концу ID окна «2», или «3» и т.д. (как пример id=»open_RuBizCSS3Modal2″) Соответственно, для уникальной кнопки тоже добавьте то же число.
Как пример:
<!--===== Открыть RuBizCSS3Modal 2 =====-->
<a href="#open_RuBizCSS3Modal2" class="RuBizCSS3Modal_button">
ОТКРЫТЬ RuBizCSS3Modal 2
</a>
<!--===== RuBizCSS3Modal 2 =====-->
<div id="open_RuBizCSS3Modal2" class="RuBizCSS3Modal">
...
</div>
...
<!--===== Открыть RuBizCSS3Modal 3 =====-->
<a href="#open_RuBizCSS3Modal3" class="RuBizCSS3Modal_button">
ОТКРЫТЬ RuBizCSS3Modal 3
</a>
<!--===== RuBizCSS3Modal 3 =====-->
<div id="open_RuBizCSS3Modal3" class="RuBizCSS3Modal">
...
</div>
ШАГ 3: Настраиваем окно
<div id="open_RuBizCSS3Modal" class="RuBizCSS3Modal">
<a href="#x" class="o_close_RuBizCSS3Modal"></a>
<div class="RuBizCSS3Modal_content effect1">
<div class="rb_zagolovok">Чтобы посмотреть это видео</div>
<center>
<div class="rb_text">Вам <u>необходимо ввести</u><br />
<strong>Ваше Имя и Ваш E-Mail</strong> под картинкой.
</div>
<div class="rb_text">Ссылка на видео будет в письме.</div>
<div class="rb_text">+ секретный бонус...</div>
</center>
<a href="#x" title="Закрыть окно" class="b_close_RuBizCSS3Modal">X</a>
</div>
</div>
Вы можете поместить этот код в любое место на сайте, желательно, где-то в конце — около </body>
Также, заметьте, у окна указан «эффект 1», т.е. смотрите тут<div class=»RuBizCSS3Modal_content effect1″>. С обновлениями будут доступны и другие эффекты, т.е. «effect2» и т.д.
Использование
В модальное окно плагин переключает ваш скрытый Контент по требованию, через атрибуты данных или JavaScript. Он также добавляет на по умолчанию прокрутка поведение и создает , чтобы обеспечить щелкните область для увольнения показаны модальные глаголы при нажатии вне модальное окно.
С помощью данных атрибутов
Активируйте модальное окно без записи JavaScript. Набор на элемент контроллера, кнопки, вместе с или , чтобы предназначаться для определенного модальное окно для переключения.
Варианты
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр , а на .
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| backdrop | boolean or the string | true | Включает в себя модальное окно-фон элемента. Кроме того, укажите на фоне которого не закрыть модальное окно по щелчку. |
| keyboard | boolean | true | Замыкает модальное окно При нажатии клавиши Escape |
| show | boolean | true | Показывает модальное окно При инициализации. |
Методы
Активирует ваш Контент в модальное окно. Принимает необязательный варианты .
Переключение вручную на модальное окно. Возвращает абоненту до модальное окно фактически было показано или скрыто (т. е. или события).
Вручную открывает модальное окно. Возвращает абоненту до модальное окно фактически было показано (т. е. события).
Вручную скрывает модальное окно. Возвращает абоненту до модальное окно На самом деле был скрытым (т. е. события).
События
Bootstrap модальное окно класс предоставляет несколько событий для навески модальное окно функциональности. Все модальное окно события обстреляли модальное окно сама по себе (т. е. ).
| Тип События | Описание |
|---|---|
| show.bs.modal | Это событие возникает сразу же, когда способ экземпляра называется. Если вызываемое щелчком, щелчке элемент, как свойство события. |
| shown.bs.modal | Это событие запускается, когда модальное окно стала видимой для пользователя (будет ждать CSS переходы для завершения). Если вызываемое щелчком, щелчке элемент как свойство события. |
| hide.bs.modal | Это событие сразу же выполняется, когда вызывается экземпляр метода . |
| hidden.bs.modal | Это событие запускается, когда модальное окно закончил быть скрыта от пользователя (будет ждать CSS переходы для завершения). |
Использование скриптов на стороне сервера
Если вы уже работали с серверным языком, скажем, PHP, то можете использовать его вместо JavaScript. Это отличный подход, если предпочитаете работать непосредственно с разметкой.
Мы можем попросить пользователя отправить запрос GET или POST. Затем позволим нашему коду (в данном случае PHP) применить соответствующий класс к <body> при перезагрузке страницы. В данной демонстрации я использую запрос GET (параметры URL).
И да, мы можем поменять местами таблицы стилей как во втором методе.
У этого метода есть очевидный недостаток: необходимо обновить страницу, чтобы переключение сработало. Но подобное серверное решение полезно для сохранения выбранной пользователем темы при перезагрузке страницы, как мы увидим позже.
