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

JS: DOM API 13 сообщений
474
Студента
84%
Завершения
Обновлено: 26 апр., 15:59

application.js

Реализуйте и экспортируйте по умолчанию функцию, которая отвечает за показ модальных окон.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<div class="modal fade" id="exampleModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>
  • Кнопки модальных окон определяются по селектору data-toggle="modal".
  • Идентификатор самого окна хранится в аттрибуте data-target кнопки
  • Чтобы окно всплыло, необходимо в элемент с id из data-target добавить класс show и стиль display выставить в block
  • За скрытие модального окна отвечает крестик доступный по селектору data-dismiss="modal" внутри модального окна. Нажатие на кнопку приводит к обратному эффекту, удаляется класс show, а display выставляется в none.

Для полного доступа к испытанию нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
120
курсов
900
упражнения
2000+
часов теории
3200
тестов