itProger Відеокурси Изучение технологии Bootstrap (верстка сайта) #12 - Создание модальных окон (modal.js)

#12 - Создание модальных окон (modal.js)

Bootstrap предлагает готовый функционал для создания модальных окон. Для этого используется JS скрипт под названием modal.js. За урок мы подключим плагин, изучим работу с ним и создадим несколько всплывающих модальных окон.

Відеоурок

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

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

Вихідний код

Модальное окно

<button class="btn btn-info" data-toggle="modal" data-target="#myModal">Вспывающее окно</button>
<div id="myModal" class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">х</button>
        <h4 class="modal-title">Заголовок окна</h4>
      </div>
      <div class="modal-body">Некий текст уведомления</div>
      <div class="modal-footer">
        <button class="btn btn-danger" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
  $('#myModal').modal("toggle");

  $('#myModal').on('shown.bs.modal', function (event) {
  // функции
  alert ("Выполенно");
  });
</script>

Онлайн редактор коду

Завантаження...

Завдання до уроку

Необхідно оформити передплату на проект, щоб отримати доступ до всіх домашніх завдань

Велике завдання за курсом

Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця

Також варто подивитися