บูตกล่องกิริยา (Modal) วิดเจ็ต

ก่อนหน้านี้: Bootstrap เปลี่ยน (Transition) วิดเจ็ต

ถัดไป: Bootstrap เมนูแบบเลื่อนลง (เลื่อนลง) วิดเจ็ต

Modal กล่อง (Modal) จะวางทับบนฟอร์มย่อยแบบฟอร์มหลัก โดยทั่วไปมีวัตถุประสงค์เพื่อแสดงเนื้อหาจากแหล่งเดียวและสามารถมีปฏิสัมพันธ์บางอย่างโดยไม่ต้องออกรูปแบบแม่ ฟอร์มย่อยสามารถให้ข้อมูลที่มีปฏิสัมพันธ์และอื่น ๆ

หากคุณต้องการที่จะอ้างถึงบุคคล Plug-in คุณสมบัติที่คุณจะต้องอ้างอิงmodal.jsหรือเป็น เงินทุนปลั๊กอินภาพรวม บทที่กล่าวถึงคุณสามารถดูbootstrap.jsหรือเวอร์ชันบีบอัดbootstrap.min.js

การใช้

คุณสามารถสลับกล่องกิริยาเนื้อหาที่ซ่อน (Modal) plug-in:

ผ่านคุณลักษณะข้อมูล: ตั้งค่าคุณสมบัติของข้อมูลสลับ = "คำกริยา"ในองค์ประกอบของการควบคุม (เช่นปุ่มหรือการเชื่อมโยง)บนและตั้งค่าข้อมูล target = "# ระบุ"หรือhref = "# ระบุ"เพื่อกำหนดโหมดเฉพาะที่จะเปลี่ยน กล่องรัฐ (กับ id = "ระบุ")
โดย javascript: การใช้เทคนิคนี้คุณสามารถเป็นเส้นที่เรียบง่ายของ JavaScript เพื่อเรียกกล่องกิริยากับ id = "ระบุ" ของ:
```
$ ( '# ตัวบ่งชี้'). Modal (ตัวเลือก)
```

ตัวอย่าง

คงที่เช่นหน้าต่างกิริยาที่แสดงในตัวอย่างต่อไปนี้:

ตัวอย่าง

<h2> สร้างกล่องกิริยา (Modal) </ h2> <! - ปุ่มที่จะเรียกกล่องกิริยา -> <ปุ่ม class = "btn BTN หลัก BTN -lg" ข้อมูลสลับ = "กิริยา" ข้อมูล target = "#myModal"> คำกริยากรอบเริ่มต้นการสาธิต </ ปุ่ม> <! - กล่อง Modal (Modal) -> <div class = "จางกิริยา" id = "myModal" TabIndex = "1" บทบาท = "โต้ตอบ" Aria-labelledby = "myModalLabel" Aria ซ่อน = "true"> <div class = "กิริยาโต้ตอบ"> <div class = "กิริยาเนื้อหา"> <div class = "กิริยาหัว"> <ปุ่ม type = "ปุ่ม" class = "ปิด" ข้อมูลยกเลิก = "กิริยา" Aria ซ่อน = "true"> & ครั้ง; </ ปุ่ม> <H4 class = "โมดอลชื่อ" id = "myModalLabel"> กล่องกิริยา (Modal) ชื่อเรื่อง </ h4> </ div> <div class = "กิริยาร่างกาย"> เพิ่มข้อความบางส่วนที่นี่ </ div> <div class = "กิริยาท้าย"> <ปุ่ม type = "ปุ่ม" class = "btn BTN เริ่มต้น" ข้อมูลยกเลิก = "กิริยา"> ปิด </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "BTN BTN หลัก" > ส่งการเปลี่ยนแปลง </ ปุ่ม> </ div> </ div> <! - /.modal-content -> </ div> <! - /.modal -> </ div>

ลอง»

ผลมีดังนี้

คำอธิบายรหัสสินค้า:

หน้าต่างกิริยาคุณจะต้องมีชนิดของทริกเกอร์บาง คุณสามารถใช้ปุ่มหรือการเชื่อมโยง ที่นี่เราจะใช้ปุ่ม
ถ้าคุณมองอย่างใกล้ชิดที่โค้ดข้างต้นคุณจะพบในส่วน <ปุ่ม>แท็กข้อมูล target = "# myModal " เป็นเป้าหมายที่คุณต้องการในการโหลดในกล่องกิริยาหน้าคุณสามารถสร้างกล่องกิริยาหลายบนหน้าเว็บแล้วสร้างการเรียกที่แตกต่างกันสำหรับแต่ละกล่องกิริยา ตอนนี้เห็นได้ชัดว่าคุณไม่สามารถโหลดโมดูลหลายในเวลาเดียวกัน แต่คุณสามารถสร้างการโหลดหลายเวลาที่ต่างกันบนหน้าเว็บ
Modal กล่องสองสิ่งที่ควรทราบ:
1. ที่แรกก็คือ.modal สำหรับ <div> รับรู้เนื้อหากล่องกิริยา
2. ประการที่สองคือระดับ .fadeเมื่อกล่องคำกริยาจะเปลี่ยนก็จะทำให้เกิดเนื้อหาจางหายไป
Aria-labelledby = "myModalLabel" อ้างอิงแอตทริบิวต์ชื่อกล่องกิริยา
ทรัพย์สินAria ซ่อน = "true" สำหรับการถือครองหน้าต่างกิริยาไม่สามารถมองเห็นจนทำให้มีการยิงขึ้น (เช่นการคลิกที่ปุ่มที่เกี่ยวข้อง)
<div class = "หัวกิริยา"> หัวสไตล์กิริยาส่วนหัวมีการกำหนดระดับหน้าต่างกิริยา
class = "ปิด" ใกล้เป็นชั้น CSS, หน้าต่างกิริยาจะใช้เพื่อกำหนดรูปแบบของปุ่มปิด
ข้อมูลยกเลิก = "กิริยา" HTML5 แอตทริบิวต์ข้อมูลที่กำหนดเองที่มันถูกนำมาใช้เพื่อปิดหน้าต่างกิริยา
class = "กิริยาร่างกาย" เป็น CSS Bootstrap คลาส CSS สำหรับรูปแบบที่กำหนดเป็นหน้าต่างกิริยาหลัก
class = "กิริยาท้าย" เป็น CSS Bootstrap ระดับ CSS สำหรับจัดแต่งทรงผมด้านล่างของหน้าต่างกิริยา
ข้อมูลสลับ = "คำกริยา" HTML5 ข้อมูลแอตทริบิวต์ที่กำหนดเองข้อมูลสลับเพื่อเปิดหน้าต่างกิริยา

ตัวเลือก

มีตัวเลือกบางอย่างที่สามารถนำมาใช้ในการปรับแต่งหน้าต่างกิริยา (Modal Window) มองและความรู้สึกที่จะได้รับโดยคุณลักษณะข้อมูลหรือ JavaScript เพื่อผ่านเป็น ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:

选项名称	类型/默认值	Data 属性名称	描述
backdrop	boolean 或 string 'static' 默认值：true	data-backdrop	指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboard	boolean 默认值：true	data-keyboard	当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
show	boolean 默认值：true	data-show	当初始化时显示模态框。
remote	path 默认值：false	data-remote	使用 jQuery.load方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

ทาง

นี่คือบางส่วนวิธีการที่เป็นประโยชน์และคำกริยา () ที่ใช้ร่วมกัน

方法	描述	实例
Options:.modal(options)	把内容作为模态框激活。接受一个可选的选项对象。	$('#identifier').modal({ keyboard: false })
Toggle:.modal('toggle')	手动切换模态框。	$('#identifier').modal('toggle')
Show:.modal('show')	手动打开模态框。	$('#identifier').modal('show')
Hide:.modal('hide')	手动隐藏模态框。	$('#identifier').modal('hide')

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการ:

ตัวอย่าง

<! - กล่อง Modal (Modal) -> <div class = "จางกิริยา" id = "myModal" TabIndex = "1" บทบาท = "โต้ตอบ" Aria-labelledby = "myModalLabel" Aria ซ่อน = "true"> <div class = "กิริยาโต้ตอบ"> <div class = "กิริยาเนื้อหา"> <div class = "กิริยาหัว"> <ปุ่ม type = "ปุ่ม" class = "ปิด" ข้อมูลยกเลิก = "กิริยา" Aria ซ่อน = "true"> × </ ปุ่ม> <H4 class = "โมดอลชื่อ" id = "myModalLabel"> กล่องกิริยา (Modal) ชื่อเรื่อง </ h4> </ div> <div class = "กิริยาร่างกาย"> กดปุ่ม ESC เพื่อออกจาก </ div> <div class = "กิริยาท้าย"> <ปุ่ม type = "ปุ่ม" class = "btn BTN เริ่มต้น" ข้อมูลยกเลิก = "กิริยา"> ปิด </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "BTN BTN หลัก" > ส่งการเปลี่ยนแปลง </ ปุ่ม> </ div> </ div> <! - /.modal-content -> </ div> <! - /.modal-dialog -> </ div> <! - /.modal -> <script> $ (ฟังก์ชั่น () {$ ( '# myModal') คำกริยา ({แป้นพิมพ์ :. ทรู})}); </ script>

ลอง»

ผลมีดังนี้

เพียงแค่คลิกปุ่ม ESC, หน้าต่างกิริยาจะออก

เหตุการณ์

ตารางต่อไปนี้แสดงเหตุการณ์ที่จะใช้กล่องกิริยา เหตุการณ์เหล่านี้สามารถนำมาใช้เมื่อฟังก์ชั่นเบ็ด

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของเหตุการณ์:

ตัวอย่าง

<! - กล่อง Modal (Modal) -> <h2> กล่องกิริยา (Modal) Plug-in เหตุการณ์ </ h2> <! - ปุ่มที่จะเรียกกล่องกิริยา -> <ปุ่ม class = "btn BTN หลัก BTN -lg" ข้อมูลสลับ = "กิริยา" ข้อมูล target = "#myModal"> คำกริยากรอบเริ่มต้นการสาธิต </ ปุ่ม> <! - กล่อง Modal (Modal) -> <div class = "จางกิริยา" id = "myModal" TabIndex = "1" บทบาท = "โต้ตอบ" Aria-labelledby = "myModalLabel" Aria ซ่อน = "true"> <div class = "กิริยาโต้ตอบ"> <div class = "กิริยาเนื้อหา"> <div class = "กิริยาหัว"> <ปุ่ม type = "ปุ่ม" class = "ปิด" ข้อมูลยกเลิก = "กิริยา" Aria ซ่อน = "true"> × </ ปุ่ม> <H4 class = "โมดอลชื่อ" id = "myModalLabel"> กล่องกิริยา (Modal) ชื่อเรื่อง </ h4> </ div> <div class = "กิริยาร่างกาย"> คลิกปุ่มปิดเพื่อตรวจสอบการทำงานของเหตุการณ์ที่เกิดขึ้น </ div> <div class = "กิริยาท้าย"> <ปุ่ม type = "ปุ่ม" class = "btn BTN เริ่มต้น" ข้อมูลยกเลิก = "กิริยา"> ปิด </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "BTN BTN หลัก" > ส่งการเปลี่ยนแปลง </ ปุ่ม> </ div> </ div> <! - /.modal-content -> </ div> <! - /.modal-dialog -> </ div> <! - /.modal -> <script> $}) (ฟังก์ชั่น () {$ ( '# myModal') คำกริยา ( 'ซ่อน')});. </ script> <script> $ (ฟังก์ชั่น () {$ ( '# myModal') บน ( 'hide.bs.modal' ฟังก์ชั่น () {แจ้งเตือน ( ' เฮ้ผมได้ยินคุณเหมือนกล่องกิริยา ... '); })}); </ script >

ลอง»

ผลมีดังนี้