ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
in English

โมดอล

ใช้ปลั๊กอินโมดอล JavaScript ของ Bootstrap เพื่อเพิ่มกล่องโต้ตอบให้กับไซต์ของคุณสำหรับไลท์บ็อกซ์ การแจ้งเตือนผู้ใช้ หรือเนื้อหาที่กำหนดเองทั้งหมด

มันทำงานอย่างไร

ก่อนเริ่มต้นใช้งานคอมโพเนนต์โมดอลของ Bootstrap โปรดอ่านข้อมูลต่อไปนี้เนื่องจากตัวเลือกเมนูของเราเพิ่งมีการเปลี่ยนแปลง

  • Modals ถูกสร้างขึ้นด้วย HTML, CSS และ JavaScript โดยจะวางตำแหน่งไว้เหนือสิ่งอื่นใดในเอกสารและเอาการเลื่อนออกจาก<body>เพื่อให้เนื้อหาโมดอลเลื่อนแทน
  • การคลิกที่โมดอล “ฉากหลัง” จะเป็นการปิดโมดอลโดยอัตโนมัติ
  • Bootstrap รองรับหน้าต่างโมดอลได้ครั้งละหนึ่งหน้าต่างเท่านั้น ไม่รองรับโมดอลที่ซ้อนกัน เนื่องจากเราเชื่อว่าโมดอลเหล่านี้เป็นประสบการณ์ที่ไม่ดีสำหรับผู้ใช้
  • Modals use position: fixedซึ่งบางครั้งอาจมีความเฉพาะเจาะจงเล็กน้อยเกี่ยวกับการเรนเดอร์ของมัน เมื่อใดก็ตามที่เป็นไปได้ ให้วางโมดอล HTML ของคุณในตำแหน่งระดับบนสุดเพื่อหลีกเลี่ยงการรบกวนที่อาจเกิดขึ้นจากองค์ประกอบอื่นๆ คุณอาจพบปัญหาเมื่อวางซ้อน.modalภายในองค์ประกอบคงที่อื่น
  • อีกครั้งเนื่องจากposition: fixedมีข้อแม้บางประการเกี่ยวกับการใช้โมดอลบนอุปกรณ์มือถือ ดูเอกสารสนับสนุนเบราว์เซอร์ของเราสำหรับรายละเอียด
  • เนื่องจาก HTML5 กำหนดความหมายของมันแอตทริบิวต์autofocusHTMLจึงไม่มีผลใน Bootstrap modals เพื่อให้ได้ผลเช่นเดียวกัน ให้ใช้ JavaScript ที่กำหนดเอง:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})
เอฟเฟกต์ภาพเคลื่อนไหวของส่วนประกอบนี้ขึ้นอยู่กับ prefers-reduced-motionคิวรีสื่อ ดู ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา

อ่านต่อเพื่อการสาธิตและแนวทางการใช้งาน

ตัวอย่าง

ด้านล่างนี้เป็น ตัวอย่างโมดอล แบบคงที่ (หมายถึงpositionและdisplayถูกแทนที่แล้ว) รวมเป็นส่วนหัวโมดอล เนื้อหาโมดอล (จำเป็นสำหรับpadding) และส่วนท้ายโมดอล (ทางเลือก) เราขอให้คุณรวมส่วนหัวที่เป็นโมดอลพร้อมการดำเนินการยกเลิกเมื่อทำได้ หรือจัดเตรียมการดำเนินการปิดที่ชัดเจนอีกรายการหนึ่ง

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

สาธิตสด

สลับการสาธิตกิริยาที่ใช้งานได้โดยคลิกปุ่มด้านล่าง มันจะเลื่อนลงและจางลงจากด้านบนของหน้า

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ฉากหลังแบบคงที่

เมื่อฉากหลังถูกตั้งค่าเป็นแบบคงที่ โมดอลจะไม่ปิดเมื่อคลิกภายนอก คลิกปุ่มด้านล่างเพื่อลอง

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

เลื่อนเนื้อหายาว

เมื่อโมดอลยาวเกินไปสำหรับวิวพอร์ตหรืออุปกรณ์ของผู้ใช้ พวกมันจะเลื่อนโดยไม่ขึ้นกับหน้า ลองใช้การสาธิตด้านล่างเพื่อดูว่าเราหมายถึงอะไร

คุณยังสามารถสร้างโมดอลแบบเลื่อนได้ ซึ่งอนุญาตให้เลื่อนเนื้อหาโมดอลโดยเพิ่ม.modal-dialog-scrollableใน.modal-dialog

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

กึ่งกลางแนวตั้ง

เพิ่ม.modal-dialog-centeredเพื่อ.modal-dialogจัดกึ่งกลางโมดอลในแนวตั้ง

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

เคล็ดลับเครื่องมือและป๊อปโอเวอร์

คำแนะนำเครื่องมือและ ป๊อป โอเวอร์สามารถวางไว้ภายในโมดอลได้ตามต้องการ เมื่อปิดโมดอล คำแนะนำเครื่องมือและป๊อปโอเวอร์ภายในจะถูกปิดโดยอัตโนมัติด้วย

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

การใช้กริด

ใช้ระบบกริด Bootstrap ภายในโมดอลโดยซ้อน.container-fluidภายในไฟล์.modal-body. จากนั้น ใช้คลาสระบบกริดปกติเหมือนที่อื่น

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

เนื้อหากิริยาที่แตกต่างกัน

มีปุ่มมากมายที่เรียกใช้ modal เดียวกันโดยมีเนื้อหาต่างกันเล็กน้อยหรือไม่? ใช้event.relatedTargetและแอตทริบิวต์HTMLdata-bs-*เพื่อเปลี่ยนแปลงเนื้อหาของโมดอลขึ้นอยู่กับว่าคลิกปุ่มใด

ด้านล่างนี้เป็นการสาธิตสด ตามด้วยตัวอย่าง HTML และ JavaScript สำหรับข้อมูลเพิ่มเติม โปรดอ่านเอกสารเหตุการณ์โมดอลสำหรับรายละเอียดเกี่ยวrelatedTargetกับ

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

สลับระหว่างโมดอล

สลับระหว่างหลายโมดอลด้วยการจัดวาง แอตทริบิวต์ data-bs-targetและdata-bs-toggleแอตทริบิวต์ ที่ชาญฉลาด ตัวอย่างเช่น คุณสามารถสลับโมดอลการรีเซ็ตรหัสผ่านจากภายในโมดอลการลงชื่อเข้าใช้ที่เปิดอยู่แล้ว โปรดทราบว่าไม่สามารถเปิดหลายโมดอลได้พร้อมกัน — วิธีนี้เป็นการสลับระหว่างโมดอลสองแบบแยกกัน

เปิดกิริยาแรก
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

เปลี่ยนแอนิเมชั่น

ตัวแปร$modal-fade-transformกำหนดสถานะการแปลง.modal-dialogก่อนที่แอนิเมชั่นเฟดอินแบบโมดอล$modal-show-transformตัวแปรจะกำหนดการแปลง.modal-dialogเมื่อสิ้นสุดแอนิเมชั่นการเฟดอินแบบโมดอล

หากคุณต้องการเช่น แอนิเมชั่นซูมเข้า คุณสามารถตั้งค่า$modal-fade-transform: scale(.8).

ลบแอนิเมชั่น

สำหรับโมดอลที่ปรากฏแทนที่จะดูจางๆ ให้ลบ.fadeคลาสออกจากมาร์กอัปโมดอลของคุณ

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

ความสูงแบบไดนามิก

หากความสูงของโมดอลเปลี่ยนแปลงในขณะที่เปิดอยู่ คุณควรโทรmyModal.handleUpdate()เพื่อปรับตำแหน่งของโมดอลใหม่ในกรณีที่แถบเลื่อนปรากฏขึ้น

การเข้าถึง

อย่าลืมเพิ่มaria-labelledby="..."อ้างอิงชื่อโมดอล ถึง.modal. นอกจากนี้ คุณอาจให้คำอธิบายของกล่องโต้ตอบโมดอลของคุณด้วยaria-describedbyon .modalโปรดทราบว่าคุณไม่จำเป็นต้องเพิ่มrole="dialog"เนื่องจากเราได้เพิ่มผ่าน JavaScript แล้ว

การฝังวิดีโอ YouTube

การฝังวิดีโอ YouTube ใน modals ต้องใช้ JavaScript เพิ่มเติมที่ไม่อยู่ใน Bootstrap เพื่อหยุดเล่นโดยอัตโนมัติและอีกมากมาย ดูโพสต์ Stack Overflow ที่เป็นประโยชน์สำหรับข้อมูลเพิ่มเติม

ขนาดเสริม

Modals มีสามขนาดให้เลือกใช้ผ่านคลาสตัวดัดแปลงที่จะวางบนไฟล์.modal-dialog. ขนาดเหล่านี้เริ่มต้นที่จุดพักบางจุดเพื่อหลีกเลี่ยงแถบเลื่อนแนวนอนบนวิวพอร์ตที่แคบกว่า

ขนาด ระดับ Modal ความกว้างสูงสุด
เล็ก .modal-sm 300px
ค่าเริ่มต้น ไม่มี 500px
ใหญ่ .modal-lg 800px
ขนาดใหญ่พิเศษ .modal-xl 1140px

โมดอลเริ่มต้นของเราที่ไม่มีคลาสตัวดัดแปลงถือเป็นโมดอลขนาด "ปานกลาง"

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

โมดอลแบบเต็มหน้าจอ

การแทนที่อีกวิธีหนึ่งคือตัวเลือกในการป็อปอัปโมดอลที่ครอบคลุมวิวพอร์ตของผู้ใช้ พร้อมใช้งานผ่านคลาสตัวดัดแปลงที่วางอยู่บนไฟล์.modal-dialog.

ระดับ ความพร้อมใช้งาน
.modal-fullscreen เสมอ
.modal-fullscreen-sm-down ด้านล่าง576px
.modal-fullscreen-md-down ด้านล่าง768px
.modal-fullscreen-lg-down ด้านล่าง992px
.modal-fullscreen-xl-down ด้านล่าง1200px
.modal-fullscreen-xxl-down ด้านล่าง1400px
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

ซาส

ตัวแปร

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

ห่วง

โมดอลเต็มหน้าจอที่ตอบสนองถูกสร้างขึ้นผ่าน$breakpointsแผนที่และวนซ้ำในscss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

การใช้งาน

ปลั๊กอินโมดอลจะสลับเนื้อหาที่ซ่อนอยู่ของคุณตามต้องการ ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript นอกจากนี้ยังลบล้างพฤติกรรมการเลื่อนเริ่มต้นและสร้าง a .modal-backdropเพื่อให้พื้นที่การคลิกสำหรับการยกเลิกโมดอลที่แสดงเมื่อคลิกนอกโมดอล

ผ่านแอตทริบิวต์ข้อมูล

สลับ

เปิดใช้งาน modal โดยไม่ต้องเขียน JavaScript ตั้งค่าdata-bs-toggle="modal"บนองค์ประกอบตัวควบคุม เช่น ปุ่ม พร้อมกับ a data-bs-target="#foo"หรือhref="#foo"เพื่อกำหนดเป้าหมายเป็นโมดอลเฉพาะเพื่อสลับ

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

อนุญาตให้ออกไป

การเลิกจ้างสามารถทำได้ด้วยdataแอตทริบิวต์บนปุ่มภายในโมดอลดังที่แสดงด้านล่าง:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

หรือบนปุ่มนอกโมดอลโดยใช้data-bs-targetดังที่แสดงด้านล่าง:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
แม้ว่าทั้งสองวิธีในการปิดโมดอลจะได้รับการสนับสนุน แต่โปรดทราบว่าการเลิกใช้โมดอลจากภายนอกไม่ตรงกับ รูปแบบการออกแบบไดอะล็อกโมดอล WAI- ARIA ทำสิ่งนี้ด้วยความเสี่ยงของคุณเอง

ผ่านจาวาสคริปต์

สร้าง modal ด้วย JavaScript บรรทัดเดียว:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-bs-เช่นเดียวกับในdata-bs-backdrop="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
backdrop บูลีนหรือสตริง'static' true รวมถึงองค์ประกอบฉากหลังที่เป็นกิริยาช่วย หรือระบุstaticฉากหลังที่ไม่ปิดโมดอลเมื่อคลิก
keyboard บูลีน true ปิดโมดอลเมื่อกดปุ่ม Escape
focus บูลีน true ให้ความสำคัญกับโมดอลเมื่อเริ่มต้น

วิธีการ

วิธีการและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

ผ่านตัวเลือก

เปิดใช้งานเนื้อหาของคุณเป็นกิริยาช่วย ยอมรับตัวเลือกobjectเสริม

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

สลับ

สลับโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะแสดงหรือซ่อนอยู่จริง (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.modalหรือhidden.bs.modalเหตุการณ์จะเกิดขึ้น)

myModal.toggle()

แสดง

เปิดโมดอลด้วยตนเอง กลับไปยังผู้เรียกก่อนที่จะแสดงกิริยาจริง (กล่าวคือ ก่อนที่shown.bs.modalเหตุการณ์จะเกิดขึ้น)

myModal.show()

นอกจากนี้ คุณสามารถส่งผ่านองค์ประกอบ DOM เป็นอาร์กิวเมนต์ที่สามารถรับได้ในเหตุการณ์โมดอล (เป็นrelatedTargetคุณสมบัติ)

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ซ่อน

ซ่อนโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.modalเหตุการณ์จะเกิดขึ้น)

myModal.hide()

handleUpdate

ปรับตำแหน่งของโมดอลด้วยตนเองหากความสูงของโมดอลเปลี่ยนแปลงขณะเปิดอยู่ (เช่น ในกรณีที่แถบเลื่อนปรากฏขึ้น)

myModal.handleUpdate()

ทิ้ง

ทำลายโมดอลขององค์ประกอบ (ลบข้อมูลที่เก็บไว้ในองค์ประกอบ DOM)

myModal.dispose()

รับอินสแตนซ์

วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์โมดอลที่เชื่อมโยงกับองค์ประกอบ DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

เมธอด แบบคงที่ที่ให้คุณรับโมดอลอินสแตนซ์ที่เชื่อมโยงกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

เหตุการณ์

โมดอลคลาสของ Bootstrap เปิดเผยเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันโมดอล เหตุการณ์โมดอลทั้งหมดถูกไล่ออกจากกิริยาช่วย (เช่น ที่<div class="modal">)

ประเภทงาน คำอธิบาย
show.bs.modal เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshowการเรียกเมธอดของอินสแตนซ์ หากเกิดจากการคลิก องค์ประกอบที่คลิกจะพร้อมใช้งานเป็นrelatedTargetคุณสมบัติของเหตุการณ์
shown.bs.modal เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นโมดอลได้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) หากเกิดจากการคลิก องค์ประกอบที่คลิกจะพร้อมใช้งานเป็นrelatedTargetคุณสมบัติของเหตุการณ์
hide.bs.modal เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhideมีการเรียกเมธอดของอินสแตนซ์
hidden.bs.modal เหตุการณ์นี้เริ่มทำงานเมื่อโมดอลถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)
hidePrevented.bs.modal เหตุการณ์นี้เริ่มทำงานเมื่อมีการแสดงโมดอล ฉากหลังของstaticโมดอล และการคลิกนอกโมดอลหรือการกดปุ่ม Escape ทำได้โดยใช้ตัวเลือกแป้นพิมพ์หรือdata-bs-keyboardตั้งค่าfalseเป็น
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})