Bir Bootstrap modunu programsal olarak nasıl tetikleyebilirim?

Buraya gidersem

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

Ve 'Demo modal'ı başlat'ı tıklayın, beklenen şeyi yapar. Modal'ı kayıt işlemimin bir parçası olarak kullanıyorum ve sunucu tarafı doğrulaması söz konusu. Sorunlar varsa, doğrulama iletilerim görüntülenirken kullanıcıyı aynı modda yönlendirmek istiyorum. Şu anda, kullanıcıdan fiziksel bir tıklama dışında modalın nasıl görüntüleneceğini anlayamıyorum. Modeli programlı olarak nasıl başlatabilirim?

Kalıcı pop-up pencereyi manuel olarak göstermek için bunu yapmanız gerekir

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

Önceden ile başlatmanız gerekir, show: falseböylece manuel olarak yapılana kadar görünmez.

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

myModalKalıcı kabın kimliği nerede .

Kipi (düğme gibi) tetikleyen öğeye data-toggle = " kip " yazmamalı ve kipi şu şekilde manuel olarak gösterebilirsiniz:

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

ve ile gizleyin:

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

Programlı bir modal oluşturma arıyorsanız, bunu sevebilirsiniz:

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

Bootstrap'ın kipi kipin oluşturulması için bir javascript yolu sağlamasına rağmen, yine de kipin html işaretlemelerini yazmanız gerekir.

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

modeli jquery (javascript) ile gösterebilirsiniz

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

Demo: burada

ya da sadece "hide" sınıfını kaldırabilirsiniz

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

​

Bunu böyle yapmak istedim angular (2/4), işte yaptığım şey:

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

Dikkat edilmesi gereken önemli noktalar :

• visible modda, modun görünürlüğünü yöneten bir değişkendir (boole).
• showve inbootstrap sınıflarıdır.

Örnek bir bileşen & html

Bileşen

@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

<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="niviteRsvpModalTitle">

                </h5>
                <button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary bg-white text-dark"
                    (click)="hideRsvpModal()">Close</button>
            </div>
        </div>
    </div>
</div>
<!--E:RSVP-->

Aşağıdaki kod, openModal () işlevinde modal açmak ve closeModal () işlevinde kapatmak için yararlıdır:

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

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

/ * #myModal mod açılır pencerenin kimliği * /