Как я могу вызвать Bootstrap модальный программно?

Question

Как я могу вызвать Bootstrap модальный программно?

Если я пойду здесь

http://getbootstrap.com/2.3.2/javascript.html#modals

и нажмите "запустить демо-модальный" он делает ожидаемую вещь. Я использую модальный как часть моего процесса регистрации,и есть проверка на стороне сервера. Если есть проблемы, я хочу перенаправить пользователя на тот же модальный режим с отображаемыми сообщениями проверки. На данный момент я не могу понять, как получить модальное отображение, кроме физического щелчка от пользователя. Как я могу запустить модель программно?

455 6

javascript twitter-bootstrap

6 ответов:

Comments

Ничего не найдено.

Claudio Redi · Accepted Answer · 2013-07-12 21:08:14

для того, чтобы вручную показать модальное всплывающее окно, вы должны сделать это
$('#myModal').modal('show');
вы ранее должны инициализировать его с show: false поэтому он не будет отображаться, пока вы не сделаете это вручную.
$('#myModal').modal({ show: false})
здесь myModal - это имя модального контейнера.

nandop · Accepted Answer · 2014-09-30 02:24:11

вы не должны писать data-toggle= "modal" в элементе, который вызвал модальный (как кнопка), и вы вручную можете показать модальный с:
$('#myModal').modal('show');
и скрыться с:
$('#myModal').modal('hide');

nakupanda · Accepted Answer · 2013-11-13 08:06:19

Если вы ищете программное модальное создание, вам может понравиться это:

http://nakupanda.github.io/bootstrap3-dialog/

несмотря на то, что Bootstrap modal предоставляет способ javascript для модального создания, вам все равно нужно сначала написать HTML-разметки modal.

tvshajeer · Accepted Answer · 2015-03-13 08:05:50

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS

$('button').click(function(){
$('#myModal').modal('show');
});

DEMO JSFIDDLE

HaNdTriX · Accepted Answer · 2012-07-10 02:51:57

вы можете показать модель через jquery (javascript)
$('#yourModalID').modal({
  show: true
})
демо: здесь

или вы можете просто удалить класс "спрятать"
<div class="modal" id="yourModalID">
  # modal content
</div>

Anand Rockzz · Accepted Answer · 2017-10-12 10:49:54

Я хотел сделать это angular (2/4) кстати, вот что я сделал:
<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`
важно Примечание:

visible - это переменная (логическая) в компоненте, которая управляет видимостью модала.

show и in несколько классов начальной загрузки.