Как вызвать модальное окно bootstrap через js?

Пользователь

от elian.swift , в категории: HTML/CSS , 2 года назад

Как вызвать модальное окно bootstrap через js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от violette_robel , 2 года назад

@elian.swift 

Для вызова модального окна Bootstrap через JavaScript используйте следующий код:

1
$('#modal-id').modal('show');


где #modal-id - это идентификатор модального окна.

Пользователь

от stephon , год назад

@elian.swift 

Вот пример подробного кода, который инициализирует модальное окно Bootstrap через JavaScript:


1


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


2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="modal-content">


  <!-- Заголовок модального окна -->


  <div class="modal-header">


    <button type="button" class="close" data-dismiss="modal">&times;</button>


    <h4 class="modal-title">Модальное окно заголовок</h4>


  </div>


  <!-- Основное содержимое модального окна -->


  <div class="modal-body">


    <p>Здесь может быть любое содержимое модального окна.</p>


  </div>


  <!-- Подвал модального окна -->


  <div class="modal-footer">


    <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>


  </div>


</div>


3


Описание кода:

  • При нажатии на кнопку с идентификатором myBtn, скрипт вызывает функцию modal('show'), которая отображает модальное окно с идентификатором myModal.
  • Используйте кнопку с классом btn btn-primary (или любой другой класс, чтобы соответствовать вашему дизайну кнопки).
  • Модальное окно должно быть скрыто по умолчанию и иметь класс modal fade и уникальный идентификатор, например, myModal.
  • Заголовок модального окна помещается в элемент с классом modal-header, а основное содержимое - в элемент с классом modal-body.
  • Подвал модального окна располагается в элементе с классом modal-footer.
  • Кнопка с классом close внутри элемента с классом modal-header закрывает модальное окно при клике.
  • Кнопка с классом btn-default и атрибутом data-dismiss="modal" закрывает модальное окно при клике.