โมดอล
ใช้ปลั๊กอินโมดอล JavaScript ของ Bootstrap เพื่อเพิ่มกล่องโต้ตอบให้กับไซต์ของคุณสำหรับไลท์บ็อกซ์ การแจ้งเตือนผู้ใช้ หรือเนื้อหาที่กำหนดเองทั้งหมด
มันทำงานอย่างไร
ก่อนเริ่มต้นใช้งานคอมโพเนนต์โมดอลของ Bootstrap โปรดอ่านข้อมูลต่อไปนี้เนื่องจากตัวเลือกเมนูของเราเพิ่งมีการเปลี่ยนแปลง
- Modals ถูกสร้างขึ้นด้วย HTML, CSS และ JavaScript โดยจะวางตำแหน่งไว้เหนือสิ่งอื่นใดในเอกสารและเอาการเลื่อนออกจาก
<body>
เพื่อให้เนื้อหาโมดอลเลื่อนแทน - การคลิกที่โมดอล “ฉากหลัง” จะเป็นการปิดโมดอลโดยอัตโนมัติ
- Bootstrap รองรับหน้าต่างโมดอลได้ครั้งละหนึ่งหน้าต่างเท่านั้น ไม่รองรับโมดอลที่ซ้อนกัน เนื่องจากเราเชื่อว่าโมดอลเหล่านี้เป็นประสบการณ์ที่ไม่ดีสำหรับผู้ใช้
- Modals use
position: fixed
ซึ่งบางครั้งอาจมีความเฉพาะเจาะจงเล็กน้อยเกี่ยวกับการเรนเดอร์ของมัน เมื่อใดก็ตามที่เป็นไปได้ ให้วางโมดอล HTML ของคุณในตำแหน่งระดับบนสุดเพื่อหลีกเลี่ยงการรบกวนที่อาจเกิดขึ้นจากองค์ประกอบอื่นๆ คุณอาจพบปัญหาเมื่อวางซ้อน.modal
ภายในองค์ประกอบคงที่อื่น - อีกครั้งเนื่องจาก
position: fixed
มีข้อแม้บางประการเกี่ยวกับการใช้โมดอลบนอุปกรณ์มือถือ ดูเอกสารสนับสนุนเบราว์เซอร์ของเราสำหรับรายละเอียด - เนื่องจาก HTML5 กำหนดความหมายของมันแอตทริบิวต์
autofocus
HTMLจึงไม่มีผลใน 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" data-bs-dismiss="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" data-bs-dismiss="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-describedby
on .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>
ผ่านจาวาสคริปต์
สร้าง 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 ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น
ผ่านตัวเลือก
เปิดใช้งานเนื้อหาของคุณเป็นกิริยาช่วย ยอมรับตัวเลือก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...
})