Все для веб-дизайнера
Как создать модальные окна для сайта c Bootstrap
Модальные окна являются важной частью любого современного сайта, а с появлением свободного набора инструментов для создания сайтов и веб-приложений такого как Bootstrap разработка стала еще проще. Сегодня мы расскажем как создать простые но в тоже время стильные модальные окна при помощи Bootstrap. У нас будет тридцать различных примера с различными модификациями модального окна, каждое из которых будет по своему практичное и функциональное. Давайте посмотрим, что у нас с этого получилось.
Если вы хотите воспользоваться готовыми вариантами, и скачать уже готовый уникальный шаблон для своего сайта бесплатно или премиум версии с техподдержкой и полной адаптивностью тогда обратите внимание на предложение наших партнеров:
Шаг 1. HTML
Для начала вам необходимо подключить библиотеки к вашему документу, вставьте следующий код в шапке страницы где будет находиться форма авторизации:
|
1 2 |
<link rel='stylesheet' href='/css/bootstrap.min.css'> <link rel='stylesheet' href='/animate.min.css'> |
Затем подключите jQuery и bootstrap.min.js внизу страницы вашего документа, чтобы все работало правильно, расположите скрипты внизу страницы:
|
1 2 |
<script src='/jquery-2.2.4.min.js'></script> <script src='/js/bootstrap.min.js'></script> |
Вызывать модальное окно мы будем благодаря следующему значению:
|
1 2 3 |
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Запустить </button> |
Содержание самого модального окна у нас будет следующим:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <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">Как создать модальные окна для сайта c Bootstrap</h4> </div> <div class="modal-body"> Содержание</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> </div> </div> |
С разметкой мы разобрались, также обратите внимание, что для каждого модального окна мы можем установить отдельный стиль анимации.
Шаг 2. CSS
Так как у нас будут все стили будут возложены на bootstrap, нам осталось только определить положение модального окна на странице:
|
1 2 3 4 5 6 7 8 9 |
.modal.fade{ opacity:1; padding: 150px; } .modal.fade .modal-dialog { -webkit-transform: translate(0); -moz-transform: translate(0); transform: translate(0); } |
Шаг 3. JS
Так как у нас будет много переменных которые мы будем изменять, чтобы увидеть различные анимации нам понадобиться немного магии с помощью js:
|
1 2 3 4 5 6 7 8 9 10 11 |
function testAnim(x) { $('.modal .modal-dialog').attr('class', 'modal-dialog ' + x + ' animated'); }; $('#myModal').on('show.bs.modal', function (e) { var anim = $('#entrance').val(); testAnim(anim); }) $('#myModal').on('hide.bs.modal', function (e) { var anim = $('#exit').val(); testAnim(anim); }) |
В результате у вас получается целый набор различный модальных окон, которые можно легко изменить и придав им желаемую анимацию.
Вот и все. Готово!
| Опубликовал Cooper 20.08.2018 в 09:34, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
