Сегодня мы рассмотрим работу с модальными окнами bootstrap, а именно : параметры окна, размеры, вызовы окна при помощи HTML атрибутов, javascript вызов окна.
подключение модального окна bootstrap
Для работы данного модуля обязательно наличие подключённого фрэймвёрка 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>
Модальное окно
Пример HTML кода статического модального окна с кнопками в подвале.
<div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button> <h4 class="modal-title">Заголовок окна</h4> </div> <div class="modal-body"> <p>Тело окна</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button> <button type="button" class="btn btn-primary">Произвольная кнопка</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
Живые примеры модальных окон с разными размерами
Различные размеры окон.
Размер окна задаётся с помощью классов (.modal-lg — большой размер и .modal-sm — маленький размер ) в теге .modal-dialog
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Большое окно</h4></div> <div class="modal-body"> ... </div> </div> </div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Большое окно</h4></div> <div class="modal-body"> ... </div> </div> </div>