โมดอล
ใช้ปลั๊กอินโมดอล JavaScript ของ Bootstrap เพื่อเพิ่มกล่องโต้ตอบให้กับไซต์ของคุณสำหรับไลท์บ็อกซ์ การแจ้งเตือนผู้ใช้ หรือเนื้อหาที่กำหนดเองทั้งหมด
มันทำงานอย่างไร
ก่อนเริ่มต้นใช้งานคอมโพเนนต์โมดอลของ Bootstrap โปรดอ่านข้อมูลต่อไปนี้เนื่องจากตัวเลือกเมนูของเราเพิ่งมีการเปลี่ยนแปลง
- Modals ถูกสร้างขึ้นด้วย HTML, CSS และ JavaScript โดยจะวางตำแหน่งไว้เหนือสิ่งอื่นใดในเอกสารและเอาการเลื่อนออกจาก
<body>
เพื่อให้เนื้อหาโมดอลเลื่อนแทน - การคลิกที่โมดอล “ฉากหลัง” จะเป็นการปิดโมดอลโดยอัตโนมัติ
- Bootstrap รองรับหน้าต่างโมดอลได้ครั้งละหนึ่งหน้าต่างเท่านั้น ไม่รองรับโมดอลที่ซ้อนกัน เนื่องจากเราเชื่อว่าโมดอลเหล่านี้เป็นประสบการณ์ที่ไม่ดีสำหรับผู้ใช้
- Modals use
position: fixed
ซึ่งบางครั้งอาจมีความเฉพาะเจาะจงเล็กน้อยเกี่ยวกับการเรนเดอร์ของมัน เมื่อใดก็ตามที่เป็นไปได้ ให้วางโมดอล HTML ของคุณในตำแหน่งระดับบนสุดเพื่อหลีกเลี่ยงการรบกวนที่อาจเกิดขึ้นจากองค์ประกอบอื่นๆ คุณอาจพบปัญหาเมื่อวางซ้อน.modal
ภายในองค์ประกอบคงที่อื่น - อีกครั้งเนื่องจาก
position: fixed
มีข้อแม้บางประการเกี่ยวกับการใช้โมดอลบนอุปกรณ์มือถือ ดูเอกสารสนับสนุนเบราว์เซอร์ของเราสำหรับรายละเอียด - เนื่องจาก HTML5 กำหนดความหมายของมันแอตทริบิวต์
autofocus
HTMLจึงไม่มีผลใน Bootstrap modals เพื่อให้ได้ผลเช่นเดียวกัน ให้ใช้ JavaScript ที่กำหนดเอง:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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-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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-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-*
(อาจใช้ jQuery ) เพื่อเปลี่ยนแปลงเนื้อหาของโมดอลขึ้นอยู่กับว่าคลิกปุ่มใด
ด้านล่างนี้เป็นการสาธิตสด ตามด้วยตัวอย่าง HTML และ JavaScript สำหรับข้อมูลเพิ่มเติม โปรดอ่านเอกสารเหตุการณ์โมดอลสำหรับรายละเอียดเกี่ยวrelatedTarget
กับ
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
เปลี่ยนแอนิเมชั่น
ตัวแปร$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').modal('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>
การใช้งาน
ปลั๊กอินโมดอลจะสลับเนื้อหาที่ซ่อนอยู่ของคุณตามต้องการ ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript นอกจากนี้ยังเพิ่ม.modal-open
เพื่อ<body>
แทนที่พฤติกรรมการเลื่อนเริ่มต้น และสร้าง a .modal-backdrop
เพื่อให้พื้นที่การคลิกสำหรับการยกเลิกโมดอลที่แสดงเมื่อคลิกนอกโมดอล
ผ่านแอตทริบิวต์ข้อมูล
เปิดใช้งาน modal โดยไม่ต้องเขียน JavaScript ตั้งค่าdata-toggle="modal"
บนองค์ประกอบตัวควบคุม เช่น ปุ่ม พร้อมกับ a data-target="#foo"
หรือhref="#foo"
เพื่อกำหนดเป้าหมายเป็นโมดอลเฉพาะเพื่อสลับ
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
ผ่านจาวาสคริปต์
เรียก modal ด้วย id myModal
ด้วย JavaScript บรรทัดเดียว:
$('#myModal').modal(options)
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-
เช่นเดียวกับในdata-backdrop=""
.
ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
ฉากหลัง | บูลีนหรือสตริง'static' |
จริง | รวมถึงองค์ประกอบฉากหลังที่เป็นกิริยาช่วย หรือระบุstatic ฉากหลังที่ไม่ปิดโมดอลเมื่อคลิก |
แป้นพิมพ์ | บูลีน | จริง | ปิดโมดอลเมื่อกดปุ่ม Escape |
จุดสนใจ | บูลีน | จริง | ให้ความสำคัญกับโมดอลเมื่อเริ่มต้น |
แสดง | บูลีน | จริง | แสดงโมดอลเมื่อเริ่มต้น |
วิธีการ
วิธีการและการเปลี่ยนแบบอะซิงโครนัส
เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น
.modal(options)
เปิดใช้งานเนื้อหาของคุณเป็นกิริยาช่วย ยอมรับตัวเลือกobject
เสริม
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
สลับโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะแสดงหรือซ่อนอยู่จริง (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.modal
หรือhidden.bs.modal
เหตุการณ์จะเกิดขึ้น)
$('#myModal').modal('toggle')
.modal('show')
เปิดโมดอลด้วยตนเอง กลับไปยังผู้เรียกก่อนที่จะแสดงกิริยาจริง (กล่าวคือ ก่อนที่shown.bs.modal
เหตุการณ์จะเกิดขึ้น)
$('#myModal').modal('show')
.modal('hide')
ซ่อนโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.modal
เหตุการณ์จะเกิดขึ้น)
$('#myModal').modal('hide')
.modal('handleUpdate')
ปรับตำแหน่งของโมดอลด้วยตนเองหากความสูงของโมดอลเปลี่ยนแปลงขณะเปิดอยู่ (เช่น ในกรณีที่แถบเลื่อนปรากฏขึ้น)
$('#myModal').modal('handleUpdate')
.modal('dispose')
ทำลายโมดอลขององค์ประกอบ
เหตุการณ์
โมดอลคลาสของ Bootstrap เปิดเผยเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันโมดอล เหตุการณ์โมดอลทั้งหมดถูกไล่ออกจากกิริยาช่วย (เช่น ที่<div class="modal">
)
ประเภทงาน | คำอธิบาย |
---|---|
show.bs.modal | เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshow การเรียกเมธอดของอินสแตนซ์ หากเกิดจากการคลิก องค์ประกอบที่คลิกจะพร้อมใช้งานเป็นrelatedTarget คุณสมบัติของเหตุการณ์ |
แสดง.bs.modal | เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นโมดอลได้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) หากเกิดจากการคลิก องค์ประกอบที่คลิกจะพร้อมใช้งานเป็นrelatedTarget คุณสมบัติของเหตุการณ์ |
hide.bs.modal | เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhide มีการเรียกเมธอดของอินสแตนซ์ |
hidden.bs.modal | เหตุการณ์นี้เริ่มทำงานเมื่อโมดอลถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) |
hidePrevented.bs.modal | เหตุการณ์นี้เริ่มทำงานเมื่อมีการแสดงโมดอล ฉากหลังของstatic โมดอล และการคลิกนอกโมดอลหรือการกดปุ่ม Escape ทำได้โดยใช้ตัวเลือกแป้นพิมพ์หรือdata-keyboard ตั้งค่าfalse เป็น |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})