Если я пойду сюда

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

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

Чтобы вручную показать модальное всплывающее окно, вы должны сделать это

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

Ранее вам нужно было инициализировать его с помощью show: false чтобы он не отображался, пока вы не сделаете это вручную.

 $('#myModal').modal({ show: false}) 

Где myModal — это идентификатор модального контейнера.

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

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

и спрятаться с:

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

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

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

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

HTML

 {amp}lt;!-- Button trigger modal --{amp}gt; {amp}lt;button type="button" class="btn btn-primary btn-lg"{amp}gt; Launch demo modal {amp}lt;/button{amp}gt; {amp}lt;!-- Modal --{amp}gt; {amp}lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"{amp}gt; {amp}lt;div class="modal-dialog"{amp}gt; {amp}lt;div class="modal-content"{amp}gt; {amp}lt;div class="modal-header"{amp}gt; {amp}lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"{amp}gt;{amp}lt;span aria-hidden="true"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;h4 class="modal-title" id="myModalLabel"{amp}gt;Modal title{amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-body"{amp}gt; ... {amp}lt;/div{amp}gt; {amp}lt;div class="modal-footer"{amp}gt; {amp}lt;button type="button" class="btn btn-default" data-dismiss="modal"{amp}gt;Close{amp}lt;/button{amp}gt; {amp}lt;button type="button" class="btn btn-primary"{amp}gt;Save changes{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

JS

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

ДЕМО JSFIDDLE

Вы можете показать модель через JQuery (JavaScript)

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

Демо: здесь

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

 {amp}lt;div class="modal" id="yourModalID"{amp}gt; # modal content {amp}lt;/div{amp}gt; 

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

 {amp}lt;div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog"{amp}gt; .. {amp}lt;/div{amp}gt;` 

Важные вещи, на которые стоит обратить внимание :

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

Пример компонента {amp}amp; html

Компонент

 @ViewChild('rsvpModal', { static: false }) rsvpModal: ElementRef; .. @HostListener('document:keydown.escape', ['$event']) onEscapeKey(event: KeyboardEvent) { this.hideRsvpModal(); } .. hideRsvpModal(event?: Event) { if (!event || (event.target as Element).classList.contains('modal')) { this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'none'); this.renderer.removeClass(this.rsvpModal.nativeElement, 'show'); this.renderer.addClass(document.body, 'modal-open'); } } showRsvpModal() { this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block'); this.renderer.addClass(this.rsvpModal.nativeElement, 'show'); this.renderer.removeClass(document.body, 'modal-open'); } 

Html

 {amp}lt;!--S:RSVP--{amp}gt; {amp}lt;div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)"{amp}gt; {amp}lt;div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"{amp}gt; {amp}lt;div class="modal-content"{amp}gt; {amp}lt;div class="modal-header"{amp}gt; {amp}lt;h5 class="modal-title" id="niviteRsvpModalTitle"{amp}gt; {amp}lt;/h5{amp}gt; {amp}lt;button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close"{amp}gt; {amp}lt;span aria-hidden="true"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-body"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-footer"{amp}gt; {amp}lt;button type="button" class="btn btn-secondary bg-white text-dark" (click)="hideRsvpModal()"{amp}gt;Close{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!--E:RSVP--{amp}gt; 

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

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

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