Всплывающие окна на Bootstrap 3 версии

Рассмотрим плагин Modal в Bootstrap 3 – диалоговое всплывающее окно, которое отображается поверх текущей страницы.

Создаем модальное окно

Код ниже мы будем использовать для создания базового варианта всплывающего окна на Bootstrap 3 версии, которое принято называть модальным окном.

<!-- Запуск модального окна через кнопку -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Всплывающее окно -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Демо нашей кнопки-триггера для всплывающего окна:

Объяснение примера

1. Триггер

Для запуска модального (всплывающего) окна необходимо использовать кнопку (button) или ссылку (a href).

Затем включите два атрибута data-*:

data-toggle="modal" открывает модальное окно

data-target="#myModal" указывает на id модального окна

2. Всплывающее окно

Родительский <div> модального окна должен иметь ID, совпадающий со значением атрибута data-target, используемого для запуска модального окна (“myModal”).

Класс .modal идентифицирует содержимое <div> как всплывающего окна и делает акцент на нем.

Класс .fade добавляет эффект перехода, который добавляет эффект затухания всплывающего окна при включении и выключении. Удалите этот класс, если вам не нужен этот эффект.

Атрибут role="dialog" улучшает доступность для людей, использующих программы чтения с экрана.

Класс .modal-dialog задает нужную ширину и отступы окна.

3. Содержимое модального окна

Наш <div> с классом class="modal-content" стилизуют окно (граница, цвет фона и т.д.). Внутри этого <div> можно добавить заголовок, тело и нижний колонтитул.

Класс .modal-header используется для определения стиля заголовка модального объекта.

<button> внутри заголовка имеет атрибут data-dismiss="modal", который закрывает модальное окно, если щелкнуть по нему.

Класс .close стилизует кнопку закрытия, а класс .modal-title задает стиль заголовка с правильной высотой строки.

Класс .modal-body используется для определения стиля тела всплывающего окна. Вы можете добавить любую HTML-разметку здесь – абзацы, изображения, видео и т.д.

Класс .modal-footer используется для определения стиля нижнего колонтитула модального окна. Обратите внимание, что эта область по умолчанию выровнена по правому краю.

Размер всплывающего окна

Измените размер окна, добавив класс .modal-sm для маленьких оконо или класс .modal-lg для больших.

Добавьте класс размера к элементу <div> с помощью класса .modal-dialog.

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

<div class="modal-dialog modal-sm">

Большое окно:

<div class="modal-dialog modal-lg">

По умолчанию модальные (всплывающие) окна имеют средний размер.

Применение

Чаще всего мне приходилось использовать всплывающие окна для поисковых форм на сайтах. Часто, клиенты хотят сделать маленькую иконку поиска (лупа) вместо большой кнопки, чтобы при нажатии появлялась форма поиска.

В данном случае мы иконку img обрамляем ссылкой a href и добавляем код выше в любое место на сайте.

Наверх ↑

Сергей Ермилов

Создаю веб-проекты, придумываю идеи, занимаюсь разработкой, оптимизирую и продвигаю сайты. Первые шаги в этом направлении были сделаны в 2008 году. Если у вас есть какие-то идеи или вы хотите что-то предложить, то пишите мне и моей команде.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вы можете использовать HTML теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>