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

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

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

Что нужно сделать, что бы настроить на своем сайте модальное окно bootstarp ? Настроим модальное окно на примере обычного html файла. Если вам необходимо настроить модальное окно на  CMS, задавайте вопросы в комментариях.

Все рабочие примеры, приведенные в данной статье можно скачать архивом в конце статьи.

Подключение скриптов и стилей фреймворка bootstarp

 Открываем редактор кода, я пользуюсь редактором notepad ++. Делаем заготовку html страницы.

После чего подключаем два файла стилей css и два файла скриптов JS, получаем файл вида:

По желанию файлы можно скачать и подключить локально.

Довольно часто модальные окна bootstrap не работают по причине не достаточного количества подключенных скриптов и стилей, или их не правильного подключения.

Как видите, в нашем примере используется bootstrap версии 4.

Вызов модального окна bootstrap

Для создания модального окна вставим между тегами <body> </body> нашего документа следующий код:

Кнопка вызова модального окна

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

Финальный  код модального окна на bootstrap

Вызов модального окна с помощью ссылки

Для вызова модального окна bootstrap по ссылке измените кнопку на ссылку.

Разбор кода модального окна:

В модальном окне можно выделить 5 основных элементов:

  1. Главный блок,
  2. Блок заголовка,
  3. Блок содержимого,
  4. Подвал окна,
  5. Кнопка (или ссылка) вызова окна.

Основные элементы модального окна на bootstrap

Примечания:

  • В компоненте modal фреймворка вызов нескольких модальных окон не поддерживается.
  • Закрыть модальное окно bootstrap можно с помощью элемента управления (кнопки закрыть) или перезагрузив страницу.
  • Для модификаций окна (bootstrap модальное окно по центру экрана, bootstrap модальное окно на весь экран, изменить размер модального окна на bootstrap) стили необходимо подключать локально и править их. Если кому-то интересно, пишите об этом в комментариях, опишу данные процессы.

 

Вставка объектов в модальное окно bootstrap

Изображение в модальном окне bootstrap: изображение вставляется, как и в любой другой код, с помощью тега img, думаю тут все понятно.

Видео в модальном окне bootstrap

 Видео вставляется в модальное окно bootstrap так же, как и в другой html код. Рассмотрим пример вставки в модальное окно видео ролика с YouTube.

Вставка видео в модальное окно bootstrap

Галерея bootstrap в модальном окне

Слайдер или карусель изображений –  это стандартный скрипт фреймворка bootstrap, интеграция с модальным окном происходит довольно просто. В следующем примере убедимся в этом.

Скачать архив с примерами.

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

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