Bootstrap Modal Plugin
ปลั๊กอิน Modal
ปลั๊กอิน Modal คือกล่องโต้ตอบ/หน้าต่างป๊อปอัปที่แสดงที่ด้านบนของหน้าปัจจุบัน:
เคล็ดลับ: สามารถรวมปลั๊กอินแยกกันได้ (โดยใช้ไฟล์ "modal.js" ของ Bootstrap) หรือรวมเข้าด้วยกัน (โดยใช้ "bootstrap.js" หรือ "bootstrap.min.js")
วิธีการสร้างกิริยาช่วย
ตัวอย่างต่อไปนี้แสดงวิธีการสร้างโมดอลพื้นฐาน:
ตัวอย่าง
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
ตัวอย่างที่อธิบาย
ส่วน "ทริกเกอร์":
หากต้องการเรียกใช้หน้าต่างโมดอล คุณต้องใช้ปุ่มหรือลิงก์
จากนั้นรวมแอตทริบิวต์ data-* สองรายการ:
data-toggle="modal"เปิดหน้าต่างโมดอลdata-target="#myModal"ชี้ไปที่รหัสของกิริยา
ส่วน "โมดอล":
พาเรน<div>ต์ของโมดอลต้องมี ID ที่เหมือนกับค่าของแอททริบิวต์ data-target ที่ใช้ในการทริกเกอร์โมดอล ("myModal")
คลาส.modalระบุเนื้อหาของ<div>เป็นกิริยาช่วยและเน้นไปที่มัน
ชั้น.fadeเรียนเพิ่มเอฟเฟกต์การเปลี่ยนแปลงซึ่งจะทำให้กิริยาในและนอกจางลง ลบคลาสนี้หากคุณไม่ต้องการเอฟเฟกต์นี้
แอตทริบิวต์role="dialog"ปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ
คลาส.modal-dialogกำหนดความกว้างและระยะขอบของโมดอลที่เหมาะสม
ส่วน "เนื้อหาโมดอล":
ด้วย " กำหนดรูป <div>แบบclass="modal-contentกิริยา (เส้นขอบ สีพื้นหลัง ฯลฯ) ภายในนี้<div>ให้เพิ่มส่วนหัว เนื้อหา และส่วนท้ายของโมดอล
คลาส.modal-headerใช้เพื่อกำหนดสไตล์สำหรับส่วนหัวของโมดอล ด้าน<button>ในส่วนหัวมีdata-dismiss="modal"แอตทริบิวต์ที่ปิดโมดอลหากคุณคลิก คลาส กำหนด.closeสไตล์ปุ่มปิด และ.modal-titleคลาสกำหนดสไตล์ส่วนหัวด้วยความสูงของบรรทัดที่เหมาะสม
คลาส.modal-bodyใช้เพื่อกำหนดสไตล์สำหรับเนื้อหาของ modal เพิ่มมาร์กอัป HTML ที่นี่ ย่อหน้า รูปภาพ วิดีโอ ฯลฯ
คลาส.modal-footerใช้เพื่อกำหนดสไตล์สำหรับส่วนท้ายของโมดอล โปรดทราบว่าพื้นที่นี้จัดชิดขวาโดยค่าเริ่มต้น
ขนาดโมดอล
เปลี่ยนขนาดของ modal โดยการเพิ่ม.modal-sm
class สำหรับ modal ขนาดเล็ก หรือ .modal-lgclass สำหรับ modal ขนาดใหญ่
เพิ่มคลาสขนาดให้กับ<div>องค์ประกอบด้วย class .modal-dialog:
โมดัลขนาดเล็ก
<div class="modal-dialog modal-sm">
โมดอลขนาดใหญ่
<div class="modal-dialog modal-lg">
ตามค่าเริ่มต้น โมดอลจะมีขนาดกลาง
ทำการอ้างอิง Modal Bootstrap ให้สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกโมดอล เมธอด และเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Modal Referenceของเรา