Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Демо модальных окон с анимацией (velocity.js)</title> <!-- Bootstrap --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> a.btn { margin-top: 10px; } </style> </head> <body> <div class="container"> <hr> <h1 class="text-center">Bootstrap 3 - Демо модальных окон с анимацией (velocity.js)</h1> <hr> <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="myModal" 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">заголовок модального окна</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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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> <button class="btn btn-primary">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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">Сохранить изменения</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="myModal" 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" 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">Сохранить изменения</button> </div> </div> </div> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script> <!-- Bootstrap --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="/assets/demo/bootstrap-4/js/velocity.min.js"></script> <script type="text/javascript" src="/assets/demo/bootstrap-4/js/velocity.ui.js"></script> <script> // добавление анимации к модальному окну $(".modal").each(function (index) { $(this).on('show.bs.modal', function (e) { var open = $(this).attr('data-easein'); if ((open == 'shake') || (open == 'pulse') || (open == 'tada') || (open == 'flash') || (open == 'bounce') || (open == 'swing')) { $('.modal-dialog').velocity('callout.' + open); } else { $('.modal-dialog').velocity('transition.' + open); } }); }); </script> </body> </html>