Модальное окно bootstrap: подключение и настройка

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

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

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

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

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

<html>
<head>
<title>Модальное окно</title>
</head>
<body>
</body>
</html>

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

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Модальное окно</title>
</head>
<body>
</body>
</html>

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

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

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

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

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

<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Заголовок модального окна</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Содержимое модального окна</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить</button>
</div>
</div>
</div>
</div>

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

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

<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive">
Открыть модальное окно
</button>
</div>

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

<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Модальное окно</title>
</head>
<body>
<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Заголовок модального окна</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Содержимое модального окна</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить</button>
</div>
</div>
</div>
</div>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive">
Открыть модальное окно
</button>
</div>
</body>
</html>

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

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

<div class="bd-example">
<a href="/" data-toggle="modal" data-target="#exampleModalLive">
Открыть модальное окно
</a>
</div>

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

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

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

Примечания:

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

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

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

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

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

<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Модальное окно</title>
</head>
<body>
<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Заголовок модального окна</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<iframe width="100%"" height="400px" src="https://www.youtube.com/embed/EgImRV_h4dc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить</button>
</div>
</div>
</div>
</div>
<div class="bd-example">
<a href="/" data-toggle="modal" data-target="#exampleModalLive">
Открыть модальное окно
</a>
</div>
</body>
</html>

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

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

<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Модальное окно</title>
</head>
<body>
<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Заголовок модального окна</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://abuzov.ru/wp-content/uploads/2017/09/interfeis-redactora-notepad.png" alt="Первый слайд">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://abuzov.ru/wp-content/uploads/2018/01/modalnoe-okno-bootstrap-300x132.png"lt="Второй слайд">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://abuzov.ru/wp-content/uploads/2017/12/krasnoukhaua-cherepaha-300x225.jpg" alt="Третий слайд">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Сохранить</button>
</div>
</div>
</div>
</div>
<div class="bd-example">
<a href="/" data-toggle="modal" data-target="#exampleModalLive">
Открыть модальное окно
</a>
</div>
</body>
</html>

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

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