Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

27.09.2016


13:26


3772


пока нет


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

Модальное окно (всплывающее окно). Основы 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>

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

<!-- Кнопка, открывающая модальное окно №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



Случайные записи:

  1. Как подключить CSS - способы подключения. Основы CSS для начинающих. Урок №3
  2. Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7
  3. HTML формы. Основы HTML для начинающих. Урок №18
  4. Контейнер. Основы bootstrap 3 для начинающих. Урок №3
  5. Комментарии в php коде и как закомментировать код. Основы PHP с нуля. Урок №4

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245