Bootstrap 4 Modal
Bootstrap 4 Modal
คอมโพเนนต์ Modal คือกล่องโต้ตอบ/หน้าต่างป๊อปอัปที่แสดงที่ด้านบนของหน้าปัจจุบัน:
วิธีการสร้างกิริยาช่วย
ตัวอย่างต่อไปนี้แสดงวิธีการสร้างโมดอลพื้นฐาน:
ตัวอย่าง
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
เพิ่มแอนิเมชั่น
ใช้.fadeคลาสเพื่อเพิ่มเอฟเฟกต์เฟดเมื่อเปิดและปิดโมดอล:
ตัวอย่าง
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
ขนาดโมดอล
เปลี่ยนขนาดของโมดอลโดยการเพิ่ม.modal-sm
คลาสสำหรับโมดัลขนาดเล็ก.modal-lgคลาสสำหรับโมดัลขนาดใหญ่ หรือ.modal-xlสำหรับโมดัลขนาดใหญ่พิเศษ
เพิ่มคลาสขนาดให้กับ<div>องค์ประกอบด้วย class .modal-dialog:
โมดัลขนาดเล็ก
<div class="modal-dialog modal-sm">
โมดอลขนาดใหญ่
<div class="modal-dialog modal-lg">
โมดอลขนาดใหญ่พิเศษ
<div class="modal-dialog modal-xl">
ตามค่าเริ่มต้น โมดอลจะมีขนาด "ปานกลาง"
ศูนย์กลางโมดอล
จัดตำแหน่งโมดอลในแนวตั้งและแนวนอนภายในหน้า โดยมี.modal-dialog-centered
คลาส:
ตัวอย่าง
<div class="modal-dialog modal-dialog-centered">
โมดอลเลื่อน
เมื่อคุณมีเนื้อหาจำนวนมากภายในโมดอล แถบเลื่อนจะถูกเพิ่มลงในเพจ ดูตัวอย่างด้านล่างเพื่อทำความเข้าใจ:
ตัวอย่าง
<div class="modal-dialog">
อย่างไรก็ตาม เป็นไปได้ที่จะเลื่อนภายในโมดอลเท่านั้น แทนที่จะเลื่อนดูหน้าเอง โดยเพิ่ม.modal-dialog-scrollableใน.modal-dialog:
ตัวอย่าง
<div class="modal-dialog modal-dialog-scrollable">
ทำการอ้างอิง Modal Bootstrap ให้สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกโมดอล เมธอด และเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Modal Referenceของเรา