модальное окно Foundation
Режимное окно отображается в заголовке страницы поп-музыки.
Мы можем быть на элемент контейнера (например, <div id="myModal" ) использует уникальный идентификатор, и добавьте .reveal-modal классы и data-reveal атрибут для добавления окна модальный. Мы можем использовать на любом элементе data-reveal-id=" id " " атрибут Али открытым модальные окна. ИД ИД должен быть согласован с контейнером (примерами являются "myModal").
Если вы хотите, чтобы нажать на область вне коробки, чтобы закрыть модальный модальный окно. Вы можете закрыть окно кнопки модальный <a> добавить ярлыки .close-reveal-modal класс.
Примечание: слайдер требуется JavaScript. Таким образом, вы должны инициализировать oundation JS:
примеров
<Тип кнопки = класса "кнопка" = "кнопка" данных показывают идентификатор = "myModal"> Нажмите , чтобы открыть Modal </ Кнопка>
<! - Модальной Содержание ->
<Div ID = класс "myModal" = "показывают покадрово" данных показывают>
<H2> Заголовок в модально. < / H2>
<P> Какой - то текст в модальный . </ P>
<P> Какой - то текст в модальный . </ P>
<A Класс = "close-reveal -modal"> & раз; </ а>
</ Div>
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
Модальный размер коробки
Вы можете добавить следующие классы на контейнере модальные окна, чтобы установить размер модальной коробки:
-
.tiny: 30% Ширина -
.small: 40% Ширина -
.medium: 60% Ширина -
.large: 70% Ширина -
.xlarge: 95% Ширина -
.full: ширина и высота 100%
Примечание: по умолчанию на планшете, ноутбуке, ПК компьютеры составляет 80% от ширины на маленьком экране ширина 100%.
примеров
Попробуйте »
Встроенный модальное окно
Вы можете встроить окно модальное в модальном окне, вы можете добавить новую кнопку запуска на первом поле модальной. Вы должны установить уникальный идентификатор для встроенного модальной коробки:
примеров
<A HREF = "#" класс = "button" data-reveal-id = "myModal"> Нажмите , чтобы открыть Modal </ а>
<! - Первый режимное ->
<Div ID = класс "myModal" = "показывают покадрово" данных показывают>
<H2> Первый режимное </ h2 >
<P> Какой - то текст .. </ p>
<P> <a HREF = "#" data-reveal-id = "secondModal" класс = "button"> Open Second режимное </ а> </ p>
<A Класс = "close-reveal -modal"> & раз; </ а>
</ Div>
<! - Вторая режимное ->
<Div ID = класс "secondModal" = "показывают покадрово" данных показывают>
<H2> Тада! Второй режимное < / h2>
<P> Какой - то текст .. </ p>
<A Класс = "close-reveal -modal"> & раз; </ а>
</ Div>
Попробуйте »
Второй модальное окно будет заменить первый модальное окно. Если вы хотите, чтобы открыть второй модальное окно, не закрывая первую модальное окно. Вы можете добавить на втором модальный поле data-options="multiple_opened:true;" ;" свойства:
примеров
Попробуйте »