Здесь показаны различия между двумя версиями данной страницы.
Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
bootstrap_modal_window [2013/10/06 15:18] admin |
bootstrap_modal_window [2013/10/06 17:44] (текущий) admin |
||
---|---|---|---|
Строка 16: | Строка 16: | ||
Т.к. все Bootsrap плагины являются плагинами, работающими на jQuery, нам в первую очередь, нужно подключить данный фрэймворк: | Т.к. все Bootsrap плагины являются плагинами, работающими на jQuery, нам в первую очередь, нужно подключить данный фрэймворк: | ||
- | ''<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>'' | + | <code php><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></code> |
Теперь можем подключать Bootstrap: | Теперь можем подключать Bootstrap: | ||
- | ''<link rel="stylesheet" href="css/bootstrap.css"> | + | <code php><link rel="stylesheet" href="css/bootstrap.css"> |
- | <script src="js/bootstrap.js" type="text/javascript"></script>'' | + | <script src="js/bootstrap.js" type="text/javascript"></script></code> |
===== Модальное окно ===== | ===== Модальное окно ===== | ||
Строка 31: | Строка 31: | ||
Для того чтобы сделать обычный div блок модальным окном, ему нужно присвоить класс modal. Также мы можем контролировать наличия таких элементов, как заголовок и контент, путём добавления классов modal-body и modal-header. | Для того чтобы сделать обычный div блок модальным окном, ему нужно присвоить класс modal. Также мы можем контролировать наличия таких элементов, как заголовок и контент, путём добавления классов modal-body и modal-header. | ||
- | ''<div id="modal" class="modal"> | + | <code php><div id="modal" class="modal"> |
<div class="modal-header"> | <div class="modal-header"> | ||
<h2>Lorem Ipsum</h2> | <h2>Lorem Ipsum</h2> | ||
Строка 40: | Строка 40: | ||
tortor semper elit, eget rutrum purus nulla id quam.</p> | tortor semper elit, eget rutrum purus nulla id quam.</p> | ||
</div> | </div> | ||
- | </div>'' | + | </div></code> |
Данный код - это просто html представление, которое вы можете увидеть ниже: | Данный код - это просто html представление, которое вы можете увидеть ниже: | ||
Строка 49: | Строка 49: | ||
Предположим, что модальное окно должно появляться в результате нажатия кнопки. Для этого, в первую очередь, чтобы изначально скрыть блок окна, присвоим ему класс hide: | Предположим, что модальное окно должно появляться в результате нажатия кнопки. Для этого, в первую очередь, чтобы изначально скрыть блок окна, присвоим ему класс hide: | ||
- | ''<div id="modal" class="modal hide"> | + | <code php><div id="modal" class="modal hide"> |
<div class="modal-header"> | <div class="modal-header"> | ||
<h2>Lorem Ipsum</h2> | <h2>Lorem Ipsum</h2> | ||
Строка 59: | Строка 59: | ||
mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p> | mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p> | ||
</div> | </div> | ||
- | </div>'' | + | </div></code> |
Теперь можно добавить и кнопку: | Теперь можно добавить и кнопку: | ||
- | ''<a href="#modal" role="button" class="btn" data-toggle="modal">Click Me</a>'' | + | <code php><a href="#modal" role="button" class="btn" data-toggle="modal">Click Me</a></code> |
Тут прошу обратить ваше внимание на HTML5 атрибут data-toggle, где мы прописываем id блока модального окна. | Тут прошу обратить ваше внимание на HTML5 атрибут data-toggle, где мы прописываем id блока модального окна. | ||
Строка 69: | Строка 69: | ||
Ну а теперь, чтобы активировать плагин, добавляем js скрипт: | Ну а теперь, чтобы активировать плагин, добавляем js скрипт: | ||
- | ''$('document').ready(function(){ | + | <code php>$('document').ready(function(){ |
$('#modal').modal(); | $('#modal').modal(); | ||
- | });'' | + | });</code> |
Теперь, при нажатии на кнопку мы получим примерно такое отображение модального окна: | Теперь, при нажатии на кнопку мы получим примерно такое отображение модального окна: | ||
Строка 81: | Строка 81: | ||
После того как наше модальное окно появилось, может возникнуть вопрос: как же его скрыть? Можно просто кликнуть за пределы окна, а можно добавить специальную кнопку, чем мы и займёмся. Для этого добавим элемент button в div модального окна: | После того как наше модальное окно появилось, может возникнуть вопрос: как же его скрыть? Можно просто кликнуть за пределы окна, а можно добавить специальную кнопку, чем мы и займёмся. Для этого добавим элемент button в div модального окна: | ||
- | ===== <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> ===== | + | <code php> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </code> |
К данному элементу мы также добавили атрибут, начинающийся на data- для фокусирования кнопки на модальном окне. Это собственно всё, что нужно сделать, чтобы данная кнопка срабатывала. | К данному элементу мы также добавили атрибут, начинающийся на data- для фокусирования кнопки на модальном окне. Это собственно всё, что нужно сделать, чтобы данная кнопка срабатывала. | ||
- | |||
===== Эффект затухания ===== | ===== Эффект затухания ===== | ||
Строка 92: | Строка 91: | ||
Теперь давайте применим ещё одну фишку, а именно, эффект затухания. Для этого div-у модального окна припишем класс fade: | Теперь давайте применим ещё одну фишку, а именно, эффект затухания. Для этого div-у модального окна припишем класс fade: | ||
- | ''<div id="modal" class="modal hide fade"> | + | <code php><div id="modal" class="modal hide fade"> |
<div class="modal-header"> | <div class="modal-header"> | ||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | ||
Строка 103: | Строка 102: | ||
mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p> | mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p> | ||
</div> | </div> | ||
- | </div>'' | + | </div></code> |
Теперь открытие и закрытие нашего модального окна будет сопровождаться приятной для глаз анимацией. Данный эффект реализован в большей степень через CSS3. | Теперь открытие и закрытие нашего модального окна будет сопровождаться приятной для глаз анимацией. Данный эффект реализован в большей степень через CSS3. | ||
Строка 110: | Строка 109: | ||
- | Для того чтобы скачать только этот компонет Bootstrap-а, переходим на страницу скачивания и выбираем: | + | Для того чтобы скачать только этот компонет Bootstrap-а, переходим на [[http://twitter.github.com/bootstrap/customize.html|страницу скачивания]] и выбираем: |
Buttons из Base CSS | Buttons из Base CSS | ||
+ | |||
Modals из JS Components | Modals из JS Components | ||
+ | |||
Modals из jQuery plugins | Modals из jQuery plugins | ||
+ | |||
+ | ~~DISCUSSION~~ | ||
+ |