Как программно запустить модал Bootstrap?

Вы должны написать data-toggle = "modal" в элементе, который вызвал модальный (например, кнопку), и вы вручную можете показать модальный:

$('#myModal').modal('show');

и скрыть:

$('#myModal').modal('hide');

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

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

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

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

вы можете показать модель через jquery (javascript)

$('#yourModalID').modal({
  show: true
})

Демо: здесь

или вы можете просто удалить класс "Скрыть"

<div class="modal" id="yourModalID">
  # modal content
</div>

Я хотел сделать это angular (2/4), вот что я сделал:

<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`

Важные вещи для note:

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

Следующий код полезен для открытия модальной функции openModal() и закрытия для closeModal():

      function openModal() {
          $(document).ready(function(){
             $("#myModal").modal();
          });
      }

     function closeModal () {
          $(document).ready(function(){
             $("#myModal").modal('hide');
          });  
      }

/* #myModal - это идентификатор модального всплывающего окна */