Модальные окна являются важной частью любого современного сайта, а с появлением свободного набора инструментов для создания сайтов и веб-приложений такого как Bootstrap разработка стала еще проще. Сегодня мы расскажем как создать простые но в тоже время стильные модальные окна при помощи Bootstrap. У нас будет тридцать различных примера с различными модификациями модального окна, каждое из которых будет по своему практичное и функциональное. Давайте посмотрим, что у нас с этого получилось.

 

Если вы хотите воспользоваться готовыми вариантами, и скачать уже готовый уникальный шаблон для своего сайта бесплатно или премиум версии с техподдержкой и полной адаптивностью тогда обратите внимание на предложение наших партнеров:

Шаг 1. HTML

Для начала вам необходимо подключить библиотеки к вашему документу, вставьте следующий код в шапке страницы где будет находиться форма авторизации:

Затем подключите jQuery и bootstrap.min.js внизу страницы вашего документа, чтобы все работало правильно, расположите скрипты внизу страницы:

Вызывать модальное окно мы будем благодаря следующему значению:

Содержание самого модального окна у нас будет следующим:

С разметкой мы разобрались, также обратите внимание, что для каждого модального окна мы можем установить отдельный стиль анимации.

Шаг 2. CSS

Так как у нас будут все стили будут возложены на bootstrap, нам осталось только определить положение модального окна на странице:

Шаг 3. JS

Так как у нас будет много переменных которые мы будем изменять, чтобы увидеть различные анимации нам понадобиться немного магии с помощью js:

В результате у вас получается целый набор различный модальных окон, которые можно легко изменить и придав им желаемую анимацию.

Вот и все. Готово!