Модальное окно (всплывающее окно). Основы bootstrap 3 для начинающих. Урок №17

Всем привет!
В сегодняшнем уроке вы научитесь быстро создавать модальные окна. Их еще называют всплывающие окна. В эти окна я в основном добавляю формы обратной связи или регистрацию. Пользователь видит кнопку «Написать автору». При нажатии на эту кнопку, ему откроется всплывающее окно с формой. Красивый эффект с готовыми стилями и кодом. Вам только нужно будет вставить свой текст или форму.

Вот этот конструктор модального окна можете смело вставлять на свою страницу:

<!-- Кнопка, открывающая модальное окно -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>

<!-- HTML-код модального окна-->
<div id="myModal" class="modal fade">
<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">
Содержимое модального окна...
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>

Строка №15 – «Содержимое модального окна...», как вы уже догадались, здесь будет находиться текст, картинки и т.д.

Чтобы установить два и больше модальных окон, нужно, чтобы для каждой кнопки вызова всплывающего окна, прописать уникальное название (я добавил «2» к «#myModal», вот так «#myModal2»):

<a href="#myModal2" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>

Если вы прописали в ссылке «#myModal2», то и модальному окну тоже нужно дать имя id с таким же именем (строка №2):

<!-- HTML-код модального окна-->
<div id="myModal2" class="modal fade">
<div class="modal-dialog">
…
</div>
</div>

Если не сделать этих требований, работать код не будет
Вот так выглядит код с двумя модальными окнами на одной страничке:

<!-- Кнопка, открывающая модальное окно №1 -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>

<!-- HTML-код модального окна №1-->
<div id="myModal" class="modal fade">
<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">
Содержимое модального окна...
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>

<!-- ********************** -->

<!-- Кнопка, открывающая модальное окно №2 -->
<a href="#myModal2" class="btn btn-primary" data-toggle="modal">Открыть модальное окно</a>

<!-- HTML-код модального окна №2-->
<div id="myModal2" class="modal fade">
<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">
Содержимое модального окна...№2
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>

Результат:

Открыть модальное окно №1

Открыть модальное окно №2