กล่องโมดอล (โมดอล) เป็นรูปแบบเด็กที่ซ้อนทับในรูปแบบแม่ โดยทั่วไปวัตถุประสงค์คือการแสดงเนื้อหาจากแหล่งแยกต่างหากซึ่งสามารถมีปฏิสัมพันธ์บางอย่างโดยไม่ต้องออกจากแบบฟอร์มหลัก รูปแบบย่อยสามารถให้ข้อมูลการโต้ตอบ ฯลฯ
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง modal.js หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
1. การใช้งาน
คุณสามารถสลับเนื้อหาที่ซ่อนอยู่ของปลั๊กอิน Modal Box (Modal):
ผ่านแอตทริบิวต์ข้อมูล: ตั้งค่าแอตทริบิวต์ data-toggle = "modal" บนองค์ประกอบคอนโทรลเลอร์ (เช่นปุ่มหรือลิงก์) และตั้งค่า data-target = "#identifier" หรือ href = "#identifier" เพื่อระบุกล่องโมดอลเฉพาะเพื่อสลับ (ด้วย id = "ตัวระบุ")
ด้วย JavaScript: การใช้เทคนิคนี้คุณสามารถเรียกกล่องโมดอลด้วย id = "ตัวระบุ" ผ่านสาย JavaScript ง่ายๆ:
$ ('#identifier'). modal (ตัวเลือก)
2. ตัวอย่างง่ายๆ
div id = "mymodal"> <div> <button type = "ปุ่ม" data-dismiss = "modal"> x </button> <h3> ชื่อกล่องหมุนชื่อ </h3> </div> <p> <p> กล่องหมุน </p> </div> <div> <a href = "#" data-dismiss = data-dismiss = "modal"> ยืนยัน </a> </div> </div>
กล่องโต้ตอบโมดอลสามารถเรียกได้โดยตรงโดยใช้ปุ่มหรือลิงค์และนี่คือการใช้งานง่าย ๆ :
คัดลอกรหัสดังนี้: <a href = "#modal1" ปุ่ม = "ปุ่ม" data-toggle = "modal"> สัญญาเพิ่ม </a>
นอกจากนี้เมื่อคุณต้องการทำให้กล่องโต้ตอบล้างข้อมูลแบบฟอร์มทุกครั้งที่เปิดออกดังนี้:
การคัดลอกรหัสมีดังนี้: $ ('#modal1'). modal ('ซ่อน');
$ ("#modal1"). on ("hidden", function () {$ ('#form1') [0] .reset ();}); // หลังจากเพิ่มสัญญาให้ล้างการดำเนินการแบบฟอร์ม
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน