Làm thế nào tôi có thể kích hoạt một phương thức Bootstrap theo chương trình?

Nếu tôi đi đây

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

Và bấm vào 'Khởi chạy phương thức demo', nó thực hiện điều mong đợi. Tôi đang sử dụng phương thức như một phần của quy trình đăng ký của mình và có xác nhận phía máy chủ liên quan. Nếu có vấn đề, tôi muốn chuyển hướng người dùng đến cùng phương thức với các thông báo xác thực của tôi được hiển thị. Hiện tại tôi không thể tìm ra cách để phương thức hiển thị ngoài một nhấp chuột vật lý từ người dùng. Làm thế nào tôi có thể khởi chạy mô hình theo chương trình?

Để hiển thị thủ công bật lên phương thức, bạn phải làm điều này

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

Trước đây bạn cần khởi tạo nó show: falseđể nó không hiển thị cho đến khi bạn thực hiện thủ công.

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

Trường hợp myModalid của container phương thức.

Bạn không nên viết data-toggle = "modal" trong phần tử đã kích hoạt phương thức (như nút) và bạn có thể hiển thị phương thức với:

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

và ẩn với:

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

Nếu bạn đang tìm kiếm một sáng tạo phương thức lập trình, bạn có thể thích điều này:

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

Mặc dù phương thức của Bootstrap cung cấp một cách javascript để tạo phương thức, trước tiên bạn vẫn cần phải viết đánh dấu html của phương thức.

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>

Mã não

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

DEMO JSFIDDLE

bạn có thể hiển thị mô hình qua jquery (javascript)

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

Bản demo: tại đây

hoặc bạn chỉ có thể loại bỏ lớp "ẩn"

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

Là một tài tài, hay nói, qua, qua một khác, qua giữ, qua, qua một tài khác, qua giữ, qua, qua, qua một tài khác, qua, qua, khác qua, khác mới khi khác, mới đăng, mới mới đăng, mới đăng đăng, mới đăng, mới đăng, mới cam mới, đăng ký cam

Tôi muốn làm angular (2/4)theo cách này, đây là những gì tôi đã làm:

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

Những điều quan trọng cần lưu ý :

• visible là một biến (boolean) trong thành phần chi phối khả năng hiển thị của phương thức.
• showvà inlà các lớp bootstrap.

Một thành phần ví dụ & html

Thành phần

@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-->

Đoạn mã sau hữu ích để mở phương thức trên hàm openModal () và đóng trên closeModal ():

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

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

/ * #myModal là id của cửa sổ bật lên phương thức * /