Работаем с Bootstrap плагином: Модальные Окна

Сегодня мы продолжим разговор о Bootstrap. На этот раз затронем тему плагинов.

demosourse

Как было отмечено в предыдущей статье, Bootstrap поставляется не только с готовыми CSS стилями, но также с целым набором jQuery плагинов. Таким образом, нам не нужно пользоваться какими-то сторонними плагинами.

В этом уроке мы посмотрим принцип работы с плагином создания модальных окон.

Подключение библиотек

Т.к. все Bootsrap плагины являются плагинами, работающими на jQuery, нам в первую очередь, нужно подключить данный фрэймворк:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Теперь можем подключать Bootstrap:

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js" type="text/javascript"></script>

Модальное окно

Модальные окна обладают одной очень важной особенностью. Их нельзя блокировать браузерами, как всплывающие окна, поэтому они идеально подходят для концентрации внимания пользователей.

Для того чтобы сделать обычный div блок модальным окном, ему нужно присвоить класс modal. Также мы можем контролировать наличия таких элементов, как заголовок и контент, путём добавления классов modal-body и modal-header.

<div id="modal" class="modal">
	<div class="modal-header">
		<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>

Данный код - это просто html представление, которое вы можете увидеть ниже:

Контроль появления модального окна

Предположим, что модальное окно должно появляться в результате нажатия кнопки. Для этого, в первую очередь, чтобы изначально скрыть блок окна, присвоим ему класс hide:

<div id="modal" class="modal hide">
	<div class="modal-header">
		<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>

Теперь можно добавить и кнопку:

<a href="#modal" role="button" class="btn" data-toggle="modal">Click Me</a>

Тут прошу обратить ваше внимание на HTML5 атрибут data-toggle, где мы прописываем id блока модального окна.

Ну а теперь, чтобы активировать плагин, добавляем js скрипт:

$('document').ready(function(){
    $('#modal').modal();
});

Теперь, при нажатии на кнопку мы получим примерно такое отображение модального окна:

Кнопка закрытия

После того как наше модальное окно появилось, может возникнуть вопрос: как же его скрыть? Можно просто кликнуть за пределы окна, а можно добавить специальную кнопку, чем мы и займёмся. Для этого добавим элемент button в div модального окна:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

К данному элементу мы также добавили атрибут, начинающийся на data- для фокусирования кнопки на модальном окне. Это собственно всё, что нужно сделать, чтобы данная кнопка срабатывала.

Эффект затухания

Теперь давайте применим ещё одну фишку, а именно, эффект затухания. Для этого 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.

Бонус

Для того чтобы скачать только этот компонет Bootstrap-а, переходим на страницу скачивания и выбираем:

  • Buttons из Base CSS
  • Modals из JS Components
  • Modals из jQuery plugins

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/bootstrap-plugin-modal-window/
Перевел: Станислав Протасевич
Урок создан: 21 Марта 2013
Просмотров: 109810
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 21 Марта 2013 18:12
    x_blazer
    Давненько с Bootstrap знаком, у них много хорошего есть!
  • 21 Марта 2013 22:29
    sigrosigro
    Снова ссылка на источник битая. Двоеточия не хватает.
    • 22 Марта 2013 09:49
      Димка Чуменко
      входит в привычку))
  • 22 Марта 2013 13:11
    cac95
    Bootstrap классная штука, но если ею будут пользоваться все, то скоро сайты будут как будто под копирку))
  • 24 Марта 2013 00:25
    bazatin
    А как сделать чтобы при загрузке страницы, окно не вылазило без нажатия кнопки?
    • 25 Марта 2013 21:46
      stas.protasevich
      В скрипте, при инициализации модального окна передайте false.
      $('#modal').modal("false");
  • 1 Апреля 2013 19:00
    lubovlap
    Подскажите как исправить...на страничке, куда приписала это окошко перестали работать все ссылки.
  • 13 Апреля 2013 23:49
    ikeacatalogue
    Привет. Как сменить анимацию окна? Чтобы просто появлялось, а не вылетало снизу.
    • 14 Апреля 2013 00:40
      stas.protasevich
      насколько я знаю, к сожалению, таких настроек нет.
  • 13 Апреля 2013 23:50
    ikeacatalogue
    П.с. и расположение окна желательно (по центру)?
    • 14 Апреля 2013 00:40
      stas.protasevich
      тут скорее всего нужно искать другие плагины модальных окон, которые более будут удовлетворять вашим требованиям
      • 14 Апреля 2013 12:53
        ikeacatalogue
        Понял. Благодарю.
  • 29 Мая 2013 18:10
    kipachi
    Будут продолжения по изучению Bootstrap?
    • 29 Мая 2013 19:39
      stas.protasevich
      будут конечно.
  • 13 Сентября 2013 15:31
    Vitalee
    Огромное спасибо) все четко и ясно :)
  • 6 Октября 2013 13:40
    dron_go
    Я хочу разместить видео в модальном окне, но при закрывание окна, видео продолжает проигрываться. Как это исправить?
  • 15 Октября 2013 13:51
    dbal
    Благодарю за обзор про bootstrap. Настроил на своем сайте, сделал кнопку все прекрасно работает. Но, при добавление ещё кнопок, текст в модальном окне заполняется из текста первой кнопки. Можно ли, чтобы при добавлении новых кнопок на сайте, текст для каждый кнопки в модальном окне был свой?
    • 14 Марта 2015 20:49
      apocallipsis
      Промучился с данным вопросом часов 6 )))) В итоге получилось конечно сделать, но это надо разбирать конкретный пример- на основе чего создаются у Вас кнопки.. P.S. Окошко работает как надо ;-)
  • 7 Декабря 2013 05:43
    akapaco
    Спасибо вэри мач!) Помогли с затуханием, нужно было всего лишь добавить класс "fade":
    <div class="modal hide fade">
  • 20 Мая 2014 15:45
    BloodyAce
    А почему в вашем примере модальное окно по [Esc] не закрывается?
  • 17 Июля 2014 10:28
    МИХАИЛ ШИЛОВ
    как быть с IE9? Шрифт становится жирным, эффекты пропадают, окно просто появляется.
  • 25 Августа 2014 21:19
    realyhead
    Скажите пожалуйста, почему окно сразу после открытия закрывается?
  • 19 Ноября 2014 20:50
    aka_nez
    Несовсем понятно, как поступить в случае, если нужно и модальное окно показать и post запрос на сервер отправить. Дело в том, что зачастую сервер очень долго обрабатывает запрос, и страница как бы "зависает", хотелось бы в модальном окне показывать юзеру информацию о том, что все в порядке и в будущем прогресс-бар выполнения запроса(с этим ясно)
  • 16 Марта 2015 15:06
    Veer
    Скажите пожалуйста куда именно добавить js скрипт:чтобы активировать плагин?
  • 9 Августа 2016 14:50
    Berlik
    Такая проблема - внутри модального окна бутстрап не корректно работают скрипты - изменяется DOM, скрипт создает нужную разметку, НО не работает интерактивность - стилизованные выпадающие списки не выпадают, карусели не каруселятся. Помогите, пожалуйста, кто сталкивался, как победить? В частности не отрабатывает SlickSlider, и dropdown отсюда http://s-sd.ru/blog_studio_design/stilizaciya_vypadayuwego_spiska_dlya_sajta/
^ Наверх ^