ปลั๊กอิน Modal
ปลั๊กอิน Modal เป็นกล่องโต้ตอบ / หน้าต่างป๊อปอัพที่แสดงอยู่ด้านบนของหน้าปัจจุบัน:
เคล็ดลับ: ปลั๊กอินสามารถรวมเป็นรายบุคคล (โดยใช้เงินทุนของแต่ละบุคคล "modal.js" ไฟล์) หรือทั้งหมดในครั้งเดียว (โดยใช้ "bootstrap.js" หรือ "bootstrap.min.js" )
วิธีการสร้าง Modal
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างคำกริยาพื้นฐาน:
ตัวอย่าง
<!-- 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>
ลองตัวเอง» ตัวอย่างอธิบาย
"Trigger" ส่วนหนึ่ง:
ที่จะเรียกหน้าต่างกิริยาคุณจะต้องใช้ปุ่มหรือการเชื่อมโยง
แล้วรวมทั้งสอง data-* คุณลักษณะ:
-
data-toggle="modal"เปิดหน้าต่างกิริยา -
data-target="#myModal"ชี้ไปที่ ID ของกิริยาที่
"Modal" ส่วนหนึ่ง:
ผู้ปกครอง <div> ของคำกริยาจะต้องมี ID ที่เป็นเช่นเดียวกับค่าของแอตทริบิวต์ข้อมูลเป้าหมายที่ใช้ในการเรียกกิริยา ("myModal")
.modal ชั้นระบุเนื้อหาของ <div> เป็นคำกริยาและนำโฟกัสไปที่มัน
.fade ระดับเพิ่มผลการเปลี่ยนแปลงที่จางหายกิริยาทั้งในและนอก นำระดับนี้หากคุณไม่ต้องการผลกระทบนี้
แอตทริบิวต์ role="dialog" ช่วยเพิ่มการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ
.modal-dialog ระดับกำหนดความกว้างที่เหมาะสมและขอบของกิริยา
"เนื้อหา Modal" ส่วนหนึ่ง:
<div> กับ class="modal-content " รูปแบบคำกริยา (ชายแดนสีพื้นหลัง ฯลฯ ) ภายในนี้ <div> เพิ่มกิริยาของส่วนหัวลำตัวและส่วนท้าย
.modal-header ชั้นจะใช้ในการกำหนดรูปแบบของส่วนหัวของกิริยาที่ <button> ภายในส่วนหัวมี data-dismiss="modal" แอตทริบิวต์ซึ่งปิดกิริยาถ้าคุณคลิกที่มัน .close รูปแบบการเรียนปุ่มปิดและ .modal-title รูปแบบระดับส่วนหัวที่มีเหมาะสม line-height
.modal-body ชั้นจะใช้ในการกำหนดรูปแบบสำหรับร่างกายของกิริยาที่ เพิ่มมาร์กอัป HTML ใด ๆ ที่นี่; ย่อหน้ารูปภาพวิดีโอและอื่น ๆ
.modal-footer ชั้นจะใช้ในการกำหนดรูปแบบสำหรับส่วนท้ายของคำกริยาที่ โปรดทราบว่าพื้นที่นี้จะถูกจัดชิดขวาโดยค่าเริ่มต้น
โมดขนาด
เปลี่ยนขนาดของกิริยาโดยการเพิ่ม .modal-sm ชั้นเรียนสำหรับ Modals ขนาดเล็กหรือ .modal-lg ชั้นเรียนสำหรับ Modals ขนาดใหญ่
เพิ่มระดับขนาดไป <div> องค์ประกอบที่มีระดับ .modal-dialog :
 | โดยค่าเริ่มต้น Modals ขนาดกลาง |
|---|
กรอก Bootstrap Modal อ้างอิง
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกทั้งหมดกิริยาวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS Modal อ้างอิง