เมื่อใช้กล่องโต้ตอบ Bootstrap Modal คุณต้องเขียนกล่องโต้ตอบ HTML บนหน้า หากมีหลายสถานที่ในหน้าเว็บที่ต้องใช้กล่องโต้ตอบนั่นหมายความว่าคุณต้องเขียนหลายแห่งซึ่งรู้สึกลำบากมาก ฉันไม่คุ้นเคยกับวิธี Bootstrap Modal Box Method ดังนั้นฉันจึงทำการห่อหุ้มและการขยายอย่างง่ายเพิ่มชื่อความกว้างและความสูงที่กำหนดเองและแสดงในศูนย์กลางตามความกว้างและความสูง
คุณสมบัติเริ่มต้น:
ID: "modal", // id pop-up
Title: "Dialog", // Pop-Up Title
ความกว้าง: "600", // ความกว้างของหน้าต่าง popt-up, % ไม่รองรับในขณะนี้
ความสูง: "500", // ความสูงของหน้าต่างยอดนิยมไม่รองรับ %
Backdrop: จริง // ไม่ว่าจะแสดงการบดเคี้ยวหรือไม่มันเหมือนกับกล่องโมดอล bootstrap ดั้งเดิม
คีย์บอร์ด: จริง // ว่าจะเปิดใช้งานปุ่ม ESC ที่จะออกหรือไม่มันเหมือนกับกล่อง bootstrap modal ดั้งเดิม
รีโมท: "", // โหลด URL ระยะไกลเช่นเดียวกับกล่องบูทสแตรปแบบดั้งเดิม
OpenEvent: NULL, // ฟังก์ชั่นการโทรกลับหลังจากเปิดหน้าต่างป๊อปอัพ
CloseEvent: NULL, // ฟังก์ชั่นการโทรกลับหลังจากปิดหน้าต่างป๊อปอัพปิด
okevent: null // คลิกปุ่มตกลงเพื่อเรียกใช้ฟังก์ชันการโทรกลับ
วิธีใช้:
1. กำหนดผ่าน HTML Data-* แอตทริบิวต์
คัดลอกรหัสดังต่อไปนี้: <a href = "#" data-remote = "test.html" data-mtitle = "modal1" data-id = "m1" data-width = "600" data-okevent = "ok ()"> การสาธิตป๊อปอัพ </a>
2. เริ่มต้นผ่าน JS
$ (". mzdialog"). mzdialog ();
สถานที่และข้อบกพร่องที่ไม่เหมาะสมนี่เป็นเพียงข้อมูลอ้างอิงสำหรับการเรียนรู้และคุณสามารถแก้ไขและปรับปรุงตัวเองได้
1. ปลั๊กอิน bootstrap-mzdialog มีเพียง 2 ปุ่มในขณะนี้ ยกเลิกและยืนยันและยังไม่รองรับปุ่มที่กำหนดเอง คุณสามารถแก้ไขซอร์สโค้ดและเพิ่มฟังก์ชั่นนี้
2. คุณสามารถใช้วิธี HTML Data-* เพื่อกำหนดได้เท่านั้น คุณไม่สนับสนุนพารามิเตอร์การกำหนดค่าระหว่างการเริ่มต้น JS คุณสามารถแก้ไขซอร์สโค้ดและขยายฟังก์ชั่นนี้ด้วยตัวเอง
3. ไม่ควรใช้น้ำหนักและความสูง
4. โปรดทราบว่าฟังก์ชั่นการโทรกลับที่นี่จะต้องอยู่ในรูปแบบสตริงเช่น OkeVent: "OK ()" ที่นี่ฟังก์ชั่นที่กำหนดโดยฟังก์ชั่น OK เองอย่าลืมรวม ();
ซอร์สโค้ด JS:
- - Backdrop: จริง // ไม่ว่าจะแสดงการบดเคี้ยวหรือไม่เช่นเดียวกับแป้นพิมพ์ bootstrap แบบดั้งเดิม: จริงหรือไม่ว่าปุ่ม ESC จะเปิดใช้งานเพื่อออกจากการออกจากรีโมตแบบบูตสแตรป okeVent: null // คลิกปุ่มตกลงเพื่อเรียกใช้ฟังก์ชันการโทรกลับ}; // หน้าต่างการสร้างแบบไดนามิก var createDialog = {init: function (opts) {var _self = this; // หน้าต่างแทรกแบบไดนามิก var d = _self.dhtml (opts); $ ("body"). ภาคผนวก (d); var modal = $ ("#"+opts.id); // เริ่มต้นหน้าต่าง modal.modal (opts); // ตำแหน่งขนาดหน้าต่าง var h = modal.height ()-modal.find (". modal-header"). outerheight ()-modal.find (". modal-footer"). outerheight ()-5; modal.css ({'margin-left': opts.width/2*-1, 'margin-top': opts.height/2*-1, 'top': '50%'}) ค้นหา (". modal-body") innerHeight (h); modal // show window.modal ('show') // ลบหน้าต่างหลังจากซ่อนหน้าต่าง html .on ('ซ่อน' ฟังก์ชั่น () {modal.remove () $ (". modal-backdrop") ลบ () ถ้า (opts.closeEvent) if (opts.openevent) {eval (opts.openevent);} // การเชื่อมโยงเหตุการณ์ $ (นี่) .find (". ตกลง") คลิก (ฟังก์ชั่น () {ถ้า opts.okevent) {var ret = eval (opts.okevent); }, dhtml: ฟังก์ชัน (o) {return '<div id = "'+o.id+'" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <button type = "ปุ่ม" data-dismiss = "modal id = "mymodallabel"> '+o.title+' </h3> </div> <p> <p> การโหลด ... </p> </div> <div> <div> <ปุ่ม data-dismiss = "modal" aria-hidden = "true"> ยกเลิก </button> - return this.each (function () {$ (this) .lick (function () {var opts = $ .extend ({}, ค่าเริ่มต้น, {id: $ (นี้) .attr ("data-id"), ชื่อ: $ (นี้) Backdrop: $ (นี่) .attr ("data-backdrop"), แป้นพิมพ์: $ (นี่) .attr ("keyboard"), รีโมท: $ (นี่) .attr ("data-remote"), OpenEvent: $ (นี้) OkeVent: $ (นี้) .attr ("data-okevent")}); - }) (jQuery);ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น