Анимированные модальные окна Bootstrap 3 / Эффекты / Сниппеты Bootstrap

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Эффекты

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 1.8 Kb

Уникальный ID: 1606

Количество символов:

Посмотрели: 5724 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-1606-20

Скачали бесплатно: 140 раз

Прокомментировали: 0 раз

Рейтинг: 4.7 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://goo.gl/iek0Cn

Информация: Пользователям

Информация: Правообладателям

Теги: ModaL, эффект, Snippet, Effect, анимация окон, velocity.js, сниппет, Bootstrap, html, animation

Поделился: BootstrapТема

Добавлено: 2016-12-24 в 11:33

Метка: 1581089273

⇄ ⇅

<h1 class="text-center">Анимированные модальные окна Bootstrap 3</h1>

<a href="#myModal1" role="button" data-target="#myModal1" class="btn btn-default" data-toggle="modal">fadeIn</a>
 <div id="myModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title" id="myModalLabel">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal2" role="button" class="btn btn-default" data-toggle="modal">flipXIn</a>
 <div id="myModal2" class="modal" data-easein="flipXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal3" role="button" class="btn btn-default" data-toggle="modal">flipYIn</a>
 <div id="myModal3" class="modal" data-easein="flipYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal4" role="button" class="btn btn-default" data-toggle="modal">flipBounceXIn</a>
 <div id="myModal4" class="modal" data-easein="flipBounceXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal5" role="button" class="btn btn-default" data-toggle="modal">flipBounceYIn</a>
 <div id="myModal5" class="modal" data-easein="flipBounceYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal6" role="button" class="btn btn-default" data-toggle="modal">swoopIn</a>
 <div id="myModal6" class="modal" data-easein="swoopIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal7" role="button" class="btn btn-default" data-toggle="modal">whirlIn</a>
 <div id="myModal7" class="modal" data-easein="whirlIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal8" role="button" class="btn btn-default" data-toggle="modal">shrinkIn</a>
 <div id="myModal8" class="modal" data-easein="shrinkIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal9" role="button" class="btn btn-default" data-toggle="modal">expandIn</a>
 <div id="myModal9" class="modal" data-easein="expandIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно 1</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal10" role="button" class="btn btn-default" data-toggle="modal">bounceIn</a>
 <div id="myModal10" class="modal" data-easein="bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно 2</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal11" role="button" class="btn btn-default" data-toggle="modal">bounceUpIn</a>
 <div id="myModal11" class="modal" data-easein="bounceUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal12" role="button" class="btn btn-default" data-toggle="modal">bounceDownIn</a>
 <div id="myModal12" class="modal" data-easein="bounceDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal13" role="button" class="btn btn-default" data-toggle="modal">bounceLeftIn</a>
 <div id="myModal13" class="modal" data-easein="bounceLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal15" role="button" class="btn btn-default" data-toggle="modal">bounceRightIn</a>
 <div id="myModal15" class="modal" data-easein="bounceRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно 1</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal16" role="button" class="btn btn-default" data-toggle="modal">slideUpIn</a>
 <div id="myModal16" class="modal" data-easein="slideUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно 2</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 <button class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal17" role="button" class="btn btn-default" data-toggle="modal">slideDownIn</a>
 <div id="myModal17" class="modal" data-easein="slideDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal18" role="button" class="btn btn-default" data-toggle="modal">slideLeftIn</a>
 <div id="myModal18" class="modal" data-easein="slideLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal14" role="button" class="btn btn-default" data-toggle="modal">slideRightIn</a>
 <div id="myModal14" class="modal" data-easein="slideRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal19" role="button" class="btn btn-default" data-toggle="modal">slideUpBigIn</a>
 <div id="myModal19" class="modal" data-easein="slideUpBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal20" role="button" class="btn btn-default" data-toggle="modal">slideDownBigIn</a>
 <div id="myModal20" class="modal" data-easein="slideDownBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal21" role="button" class="btn btn-default" data-toggle="modal">slideLeftBigIn</a>
 <div id="myModal21" class="modal" data-easein="slideLeftBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal22" role="button" class="btn btn-default" data-toggle="modal">slideRightBigIn</a>
 <div id="myModal22" class="modal" data-easein="slideRightBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal23" role="button" class="btn btn-default" data-toggle="modal">perspectiveUpIn</a>
 <div id="myModal23" class="modal" data-easein="perspectiveUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal24" role="button" class="btn btn-default" data-toggle="modal">perspectiveDownIn</a>
 <div id="myModal24" class="modal" data-easein="perspectiveDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal25" role="button" class="btn btn-default" data-toggle="modal">perspectiveLeftIn</a>
 <div id="myModal25" class="modal" data-easein="perspectiveLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal26" role="button" class="btn btn-default" data-toggle="modal">perspectiveRightIn</a>
 <div id="myModal26" class="modal" data-easein="perspectiveRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal27" role="button" class="btn btn-default" data-toggle="modal">shake</a>
 <div id="myModal27" class="modal" data-easein="shake" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal28" role="button" class="btn btn-default" data-toggle="modal">tada</a>
 <div id="myModal28" class="modal" data-easein="tada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal29" role="button" class="btn btn-default" data-toggle="modal">swing</a>
 <div id="myModal29" class="modal" data-easein="swing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal30" role="button" class="btn btn-default" data-toggle="modal">bounce</a>
 <div id="myModal30" class="modal" data-easein="bounce" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal31" role="button" class="btn btn-default" data-toggle="modal">flash</a>
 <div id="myModal31" class="modal" data-easein="flash" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

<a href="#myModal32" role="button" class="btn btn-default" data-toggle="modal">pulse</a>
 <div id="myModal32" class="modal" data-easein="pulse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 <h4 class="modal-title">Анимированное окно</h4>
 </div>
 <div class="modal-body">
 <p>Содержимое окна</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Закрыть</button>
 </div>
 </div>
 </div>
 </div>

</div>
</div>

});
});
</script>

BootstrapTema

Анимированные модальные окна Bootstrap 3

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0