ฉันจะทริกเกอร์ Bootstrap modal โดยทางโปรแกรมได้อย่างไร

ถ้าฉันไปที่นี่

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

และคลิก 'เปิดตัวตัวอย่างการสาธิต' มันทำสิ่งที่คาดหวัง ฉันใช้คำกริยาเป็นส่วนหนึ่งของกระบวนการลงทะเบียนของฉันและมีการตรวจสอบด้านเซิร์ฟเวอร์ที่เกี่ยวข้อง หากมีปัญหาฉันต้องการเปลี่ยนเส้นทางผู้ใช้ไปยัง modal เดียวกันโดยมีข้อความการตรวจสอบความถูกต้องปรากฏขึ้น ในขณะนี้ฉันไม่สามารถหาวิธีที่จะได้รับกิริยาที่จะแสดงนอกเหนือจากการคลิกทางกายภาพจากผู้ใช้ ฉันจะเปิดตัวแบบจำลองทางโปรแกรมได้อย่างไร

เพื่อที่จะแสดงป๊อปโมดัลด้วยตนเองคุณต้องทำเช่นนี้

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

ก่อนหน้านี้คุณต้องเริ่มต้นด้วยshow: falseจึงจะไม่แสดงจนกว่าคุณจะทำมันด้วยตนเอง

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

ในกรณีที่myModalเป็นรหัสของคอนเทนเนอร์กิริยา

คุณไม่ควรเขียนdata-toggle = "modal"ในองค์ประกอบที่เรียกใช้ modal (เช่นปุ่ม) และคุณสามารถแสดง modal ด้วยตนเอง:

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

และซ่อนด้วย:

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

หากคุณกำลังมองหาการสร้างคำกริยาแบบเป็นโปรแกรมคุณอาจรักสิ่งนี้:

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

แม้ว่าโมดอลของ Bootstrap จะมีวิธีจาวาสคริปต์สำหรับการสร้างกิริยา แต่คุณยังต้องเขียนมาร์กอัพ 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>`

สิ่งสำคัญที่ควรทราบ :

• visible เป็นตัวแปร (บูลีน) ในองค์ประกอบที่ควบคุมการมองเห็นของคำกริยา
• showและinเป็นคลาส bootstrap

ตัวอย่างส่วนประกอบ & 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

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

รหัสต่อไปนี้มีประโยชน์ในการเปิด modal ในฟังก์ชั่น openModal () และปิด on closeModal ():

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

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

/ * #myModal เป็น id ของป๊อปอัป modal * /