Инструменты пользователя

Инструменты сайта


bootstrap_modal_window

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия
Предыдущая версия
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~~
 +
bootstrap_modal_window.1381058328.txt.gz · Последние изменения: 2013/10/06 15:18 — admin