Модальные окна с Bootstrap

Данная заметка содержит небольшой пример создания простого модального окна средствами CSS-фрейморка Twitter Bootstrap и JQuery.

JQuery модальные окна

1. Подключение стилей и клиентских скриптов необходимых для работы будет выглядеть вот так:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://yandex.st/jquery/1.8.3/jquery.min.js">
</script>  
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-modal.js"></script>

Небольшое примечание. Если подключите ещё и файл «bootstrap.min.js» или «bootstrap.js», тогда окно при всплытии будет через доли секунды исчезать. Причину проявления такого «бага» я не выяснял.

2. HTML-разметка будет выглядеть вот так:

<!-- Кнопка по нажатию на которую будет показано окно: -->
<a data-toggle="modal" data-target="#mayoOkno" 
class="btn btn-primary">Показать модальное окно!</a>

<!-- Модальное окно: -->
<div id="mayoOkno" class="modal hide fade" 
tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h3>Заголовок модального окна</h3>
</div>
<div class="modal-body">
<!-- Содержимое модального окна[...] -->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Закрыть</button>
<button class="btn btn-primary">Просто кнопка</button>
</div>
</div>

Если не хотите лишней анимации при появлении или скрытии модального окна, вы можете не подключать файл «bootstrap-transition.js» / просто убрать класс CSS fade. Скачать готовый пример можно вот здесь:

Скачать

P.S. Чтобы показать окно при загрузке веб-страницы можно воспользоваться следующим программным кодом (после подключения JQuery / JavaScript):

jQuery(document).ready(function($){
  $('#mayoOkno').modal();
});
Опубликовано 20-03-2013 в 16:44


Комментариев к записи: 4

  1. Денис:

    А как сделать, чтобы при клике на оверлей окно не закрывалось?

    • Алексей:

      Для того чтобы окно не закрывалось при нажатии на темную область укажите у диалога атрибут data-backdrop=»static»

      если нужно чтобы вообще не было темной области data-backdrop=»false»

  2. Мак:

    По поводу замечания в первом пункте:
    у Вас bootstrap.js собран уже с bootstrap-modal.js, так что подключать надо только bootstrap.js и ничего закрываться не будет

  3. Спасибо. Все отлично работает!

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

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

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











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты