Sourceโมดอล
ใช้ปลั๊กอินโมดอล JavaScript ของ Bootstrap เพื่อเพิ่มกล่องโต้ตอบให้กับไซต์ของคุณสำหรับไลท์บ็อกซ์ การแจ้งเตือนผู้ใช้ หรือเนื้อหาที่กำหนดเองทั้งหมด
มันทำงานอย่างไร
ก่อนเริ่มต้นใช้งานคอมโพเนนต์โมดอลของ Bootstrap โปรดอ่านข้อมูลต่อไปนี้เนื่องจากตัวเลือกเมนูของเราเพิ่งมีการเปลี่ยนแปลง
Modals ถูกสร้างขึ้นด้วย HTML, CSS และ JavaScript โดยจะวางตำแหน่งไว้เหนือสิ่งอื่นใดในเอกสารและเอาการเลื่อนออกจาก<body>
เพื่อให้เนื้อหาโมดอลเลื่อนแทน
การคลิกที่โมดอล “ฉากหลัง” จะเป็นการปิดโมดอลโดยอัตโนมัติ
Bootstrap รองรับหน้าต่างโมดอลได้ครั้งละหนึ่งหน้าต่างเท่านั้น ไม่รองรับโมดอลที่ซ้อนกัน เนื่องจากเราเชื่อว่าโมดอลเหล่านี้เป็นประสบการณ์ที่ไม่ดีสำหรับผู้ใช้
Modals use position: fixed
ซึ่งบางครั้งอาจมีความเฉพาะเจาะจงเล็กน้อยเกี่ยวกับการเรนเดอร์ของมัน เมื่อใดก็ตามที่เป็นไปได้ ให้วางโมดอล HTML ของคุณในตำแหน่งระดับบนสุดเพื่อหลีกเลี่ยงการรบกวนที่อาจเกิดขึ้นจากองค์ประกอบอื่นๆ คุณอาจพบปัญหาเมื่อวางซ้อน.modal
ภายในองค์ประกอบคงที่อื่น
อีกครั้งเนื่องจากposition: fixed
มีข้อแม้บางประการเกี่ยวกับการใช้โมดอลบนอุปกรณ์มือถือ ดูเอกสารสนับสนุนเบราว์เซอร์ของเรา สำหรับรายละเอียด
เนื่องจาก HTML5 กำหนดความหมายของมันแอตทริบิวต์autofocus
HTML จึงไม่มีผลใน Bootstrap modals เพื่อให้ได้ผลเช่นเดียวกัน ให้ใช้ JavaScript ที่กำหนดเอง:
$ ( '#myModal' ). on ( 'shown.bs.modal' , function () {
$ ( '#myInput' ). trigger ( 'focus' )
})
อ่านต่อเพื่อการสาธิตและแนวทางการใช้งาน
ตัวอย่าง
ส่วนประกอบโมดอล
ด้านล่างนี้เป็น ตัวอย่างโมดอล แบบคงที่ (หมายถึงposition
และdisplay
ถูกแทนที่แล้ว) รวมเป็นส่วนหัวโมดอล เนื้อหาโมดอล (จำเป็นสำหรับpadding
) และส่วนท้ายโมดอล (ทางเลือก) เราขอให้คุณรวมส่วนหัวที่เป็นโมดอลพร้อมกับการดำเนินการยกเลิกเมื่อใดก็ตามที่เป็นไปได้ หรือจัดเตรียมการดำเนินการปิดที่ชัดเจนอีกรายการหนึ่ง
ข้อความเนื้อความโมดอลไปที่นี่
<div class= "modal" tabindex= "-1" role= "dialog" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
<p> Modal body text goes here.</p>
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
สาธิตสด
สลับการสาธิตกิริยาที่ใช้งานได้โดยคลิกปุ่มด้านล่าง มันจะเลื่อนลงและจางลงจากด้านบนของหน้า
Woohoo คุณกำลังอ่านข้อความนี้เป็นกิริยาช่วย!
เปิดตัวโมดอลสาธิต
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModal" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
เลื่อนเนื้อหายาว
เมื่อโมดอลยาวเกินไปสำหรับวิวพอร์ตหรืออุปกรณ์ของผู้ใช้ พวกมันจะเลื่อนโดยไม่ขึ้นกับหน้า ลองใช้การสาธิตด้านล่างเพื่อดูว่าเราหมายถึงอะไร
Cras mattis consectetur purus นั่ง amet fermentum. Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Morbi leo risus, porta ac consectetur ac, เวสติบูลัมและอีรอส
ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus นั่ง amet fermentum. Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Morbi leo risus, porta ac consectetur ac, เวสติบูลัมและอีรอส
ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus นั่ง amet fermentum. Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Morbi leo risus, porta ac consectetur ac, เวสติบูลัมและอีรอส
ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus นั่ง amet fermentum. Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Morbi leo risus, porta ac consectetur ac, เวสติบูลัมและอีรอส
ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus นั่ง amet fermentum. Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Morbi leo risus, porta ac consectetur ac, เวสติบูลัมและอีรอส
ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus นั่ง amet fermentum. Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Morbi leo risus, porta ac consectetur ac, เวสติบูลัมและอีรอส
ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
เปิดตัวโมดอลสาธิต
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalLong" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalLong" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLongTitle" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLongTitle" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
กึ่งกลางแนวตั้ง
เพิ่ม.modal-dialog-centered
เพื่อ.modal-dialog
จัดกึ่งกลางโมดอลในแนวตั้ง
Cras mattis consectetur purus นั่ง amet fermentum. Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Morbi leo risus, porta ac consectetur ac, เวสติบูลัมและอีรอส
เปิดตัวโมดอลสาธิต
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalCenter" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalCenter" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalCenterTitle" aria-hidden= "true" >
<div class= "modal-dialog modal-dialog-centered" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalCenterTitle" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
คำแนะนำเครื่องมือ และ ป๊อป โอเวอร์ สามารถวางไว้ภายในโมดอลได้ตามต้องการ เมื่อปิดโมดอล คำแนะนำเครื่องมือและป๊อปโอเวอร์ภายในจะถูกปิดโดยอัตโนมัติด้วย
Popover ในกิริยาช่วย
ปุ่ม นี้เรียกป๊อปโอเวอร์เมื่อคลิก
เคล็ดลับเครื่องมือในโมดอล
ลิงก์นี้ และลิงก์นั้น มีคำแนะนำเครื่องมือเมื่อวางเมาส์เหนือ
เปิดตัวโมดอลสาธิต
<div class= "modal-body" >
<h5> Popover in a modal</h5>
<p> This <a href= "#" role= "button" class= "btn btn-secondary popover-test" title= "Popover title" data-content= "Popover body content is set in this attribute." > button</a> triggers a popover on click.</p>
<hr>
<h5> Tooltips in a modal</h5>
<p><a href= "#" class= "tooltip-test" title= "Tooltip" > This link</a> and <a href= "#" class= "tooltip-test" title= "Tooltip" > that link</a> have tooltips on hover.</p>
</div>
การใช้กริด
ใช้ระบบกริด Bootstrap ภายในโมดอลโดยซ้อน.container-fluid
ภายในไฟล์.modal-body
. จากนั้นใช้คลาสระบบกริดปกติเหมือนที่อื่น
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
ระดับ 1: .col-sm-9
ระดับ 2: .col-8 .col-sm-6
ระดับ 2: .col-4 .col-sm-6
เปิดตัวโมดอลสาธิต
<div class= "modal-body" >
<div class= "container-fluid" >
<div class= "row" >
<div class= "col-md-4" > .col-md-4</div>
<div class= "col-md-4 ml-auto" > .col-md-4 .ml-auto</div>
</div>
<div class= "row" >
<div class= "col-md-3 ml-auto" > .col-md-3 .ml-auto</div>
<div class= "col-md-2 ml-auto" > .col-md-2 .ml-auto</div>
</div>
<div class= "row" >
<div class= "col-md-6 ml-auto" > .col-md-6 .ml-auto</div>
</div>
<div class= "row" >
<div class= "col-sm-9" >
Level 1: .col-sm-9
<div class= "row" >
<div class= "col-8 col-sm-6" >
Level 2: .col-8 .col-sm-6
</div>
<div class= "col-4 col-sm-6" >
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
เนื้อหากิริยาที่แตกต่างกัน
มีปุ่มมากมายที่เรียกใช้ modal เดียวกันโดยมีเนื้อหาต่างกันเล็กน้อยหรือไม่? ใช้event.relatedTarget
และแอตทริบิวต์ HTMLdata-*
(อาจใช้ jQuery ) เพื่อเปลี่ยนแปลงเนื้อหาของโมดอลขึ้นอยู่กับว่าคลิกปุ่มใด
ด้านล่างนี้เป็นการสาธิตสด ตามด้วยตัวอย่าง HTML และ JavaScript สำหรับข้อมูลเพิ่มเติม โปรดอ่านเอกสารเหตุการณ์โมดอล สำหรับรายละเอียดเกี่ยวrelatedTarget
กับ
เปิดโมดอลสำหรับ @mdo
เปิดกิริยาสำหรับ @fat
เปิด modal สำหรับ @getbootstrap
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@mdo" > Open modal for @mdo</button>
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@fat" > Open modal for @fat</button>
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@getbootstrap" > Open modal for @getbootstrap</button>
<div class= "modal fade" id= "exampleModal" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > New message</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
<form>
<div class= "form-group" >
<label for= "recipient-name" class= "col-form-label" > Recipient:</label>
<input type= "text" class= "form-control" id= "recipient-name" >
</div>
<div class= "form-group" >
<label for= "message-text" class= "col-form-label" > Message:</label>
<textarea class= "form-control" id= "message-text" ></textarea>
</div>
</form>
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Send message</button>
</div>
</div>
</div>
</div>
$ ( '#exampleModal' ). on ( 'show.bs.modal' , function ( event ) {
var button = $ ( event . relatedTarget ) // Button that triggered the modal
var recipient = button . data ( 'whatever' ) // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $ ( this )
modal . find ( '.modal-title' ). text ( 'New message to ' + recipient )
modal . find ( '.modal-body input' ). val ( recipient )
})
ลบแอนิเมชั่น
สำหรับโมดอลที่ปรากฏแทนที่จะดูจางๆ ให้ลบ.fade
คลาสออกจากมาร์กอัปโมดอลของคุณ
<div class= "modal" tabindex= "-1" role= "dialog" aria-labelledby= "..." aria-hidden= "true" >
...
</div>
ความสูงแบบไดนามิก
หากความสูงของโมดอลเปลี่ยนแปลงในขณะที่เปิดอยู่ คุณควรโทร$('#myModal').modal('handleUpdate')
เพื่อปรับตำแหน่งของโมดอลใหม่ในกรณีที่แถบเลื่อนปรากฏขึ้น
การเข้าถึง
อย่าลืมเพิ่มrole="dialog"
และaria-labelledby="..."
อ้างอิงชื่อโมดอล ถึง.modal
และrole="document"
ตัว.modal-dialog
มันเอง นอกจากนี้ คุณอาจให้คำอธิบายของกล่องโต้ตอบโมดอลของคุณด้วยaria-describedby
on.modal
การฝังวิดีโอ YouTube
การฝังวิดีโอ YouTube ใน modals ต้องใช้ JavaScript เพิ่มเติมที่ไม่อยู่ใน Bootstrap เพื่อหยุดเล่นโดยอัตโนมัติและอีกมากมาย ดูโพสต์ Stack Overflow ที่เป็นประโยชน์ สำหรับข้อมูลเพิ่มเติม
ขนาดเสริม
Modals มีสองขนาดให้เลือก ใช้ได้ผ่านคลาสตัวปรับแต่งที่จะวางบนไฟล์.modal-dialog
. ขนาดเหล่านี้เริ่มต้นที่จุดพักบางจุดเพื่อหลีกเลี่ยงแถบเลื่อนแนวนอนบนวิวพอร์ตที่แคบกว่า
โมดอลขนาดใหญ่
กิริยาขนาดเล็ก
<!-- Large modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-lg" > Large modal</button>
<div class= "modal fade bd-example-modal-lg" tabindex= "-1" role= "dialog" aria-labelledby= "myLargeModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-lg" >
<div class= "modal-content" >
...
</div>
</div>
</div>
<!-- Small modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-sm" > Small modal</button>
<div class= "modal fade bd-example-modal-sm" tabindex= "-1" role= "dialog" aria-labelledby= "mySmallModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-sm" >
<div class= "modal-content" >
...
</div>
</div>
</div>
การใช้งาน
ปลั๊กอินโมดอลจะสลับเนื้อหาที่ซ่อนอยู่ของคุณตามต้องการ ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript นอกจากนี้ยังเพิ่ม.modal-open
เพื่อ<body>
แทนที่พฤติกรรมการเลื่อนเริ่มต้น และสร้าง a .modal-backdrop
เพื่อให้พื้นที่การคลิกสำหรับการยกเลิกโมดอลที่แสดงเมื่อคลิกนอกโมดอล
ผ่านแอตทริบิวต์ข้อมูล
เปิดใช้งาน modal โดยไม่ต้องเขียน JavaScript ตั้งค่าdata-toggle="modal"
บนองค์ประกอบตัวควบคุม เช่น ปุ่ม พร้อมกับ a data-target="#foo"
หรือhref="#foo"
เพื่อกำหนดเป้าหมายเป็นโมดอลเฉพาะเพื่อสลับ
<button type= "button" data-toggle= "modal" data-target= "#myModal" > Launch modal</button>
ผ่านจาวาสคริปต์
เรียก modal ด้วย id myModal
ด้วย JavaScript บรรทัดเดียว:
$ ( '#myModal' ). modal ( options )
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ให้ผนวกชื่อตัวเลือกเข้ากับdata-
เช่นในdata-backdrop=""
.
ชื่อ
พิมพ์
ค่าเริ่มต้น
คำอธิบาย
ฉากหลัง
บูลีนหรือสตริง'static'
จริง
รวมถึงองค์ประกอบฉากหลังที่เป็นกิริยาช่วย หรือระบุstatic
ฉากหลังที่ไม่ปิดกิริยาเมื่อคลิก
แป้นพิมพ์
บูลีน
จริง
ปิดโมดอลเมื่อกดปุ่ม Escape
จุดสนใจ
บูลีน
จริง
ให้ความสำคัญกับโมดอลเมื่อเริ่มต้น
แสดง
บูลีน
จริง
แสดงโมดอลเมื่อเริ่มต้น
วิธีการ
วิธีการและการเปลี่ยนแบบอะซิงโครนัส
เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัส และเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเ��ลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูก ละเว้น
ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม
.modal(options)
เปิดใช้งานเนื้อหาของคุณเป็นกิริยาช่วย ยอมรับตัวเลือกobject
เสริม
$ ( '#myModal' ). modal ({
keyboard : false
})
.modal('toggle')
สลับโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะแสดงหรือซ่อนอยู่จริง (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.modal
หรือhidden.bs.modal
เหตุการณ์จะเกิดขึ้น)
$ ( '#myModal' ). modal ( 'toggle' )
.modal('show')
เปิดโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่จะแสดงกิริยาจริง (กล่าวคือ ก่อนที่shown.bs.modal
เหตุการณ์จะเกิดขึ้น)
$ ( '#myModal' ). modal ( 'show' )
.modal('hide')
ซ่อนโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.modal
เหตุการณ์จะเกิดขึ้น)
$ ( '#myModal' ). modal ( 'hide' )
.modal('handleUpdate')
ปรับตำแหน่งของโมดอลด้วยตนเองหากความสูงของโมดอลเปลี่ยนแปลงขณะเปิดอยู่ (เช่น ในกรณีที่แถบเลื่อนปรากฏขึ้น)
$ ( '#myModal' ). modal ( 'handleUpdate' )
.modal('dispose')
ทำลายโมดอลขององค์ประกอบ
กิจกรรม
โมดอลคลาสของ Bootstrap เปิดเผยเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันโมดอล เหตุการณ์โมดอลทั้งหมดถูกไล่ออกจากกิริยาช่วย (เช่น ที่<div class="modal">
)
ประเภทงาน
คำอธิบาย
show.bs.modal
เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshow
การเรียกเมธอดของอินสแตนซ์ หากเกิดจากการคลิก องค์ประกอบที่คลิกจะพร้อมใช้งานเป็นrelatedTarget
คุณสมบัติของเหตุการณ์
แสดง.bs.modal
เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นโมดอลได้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) หากเกิดจากการคลิก องค์ประกอบที่คลิกจะพร้อมใช้งานเป็นrelatedTarget
คุณสมบัติของเหตุการณ์
hide.bs.modal
เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhide
มีการเรียกเมธอดของอินสแตนซ์
hidden.bs.modal
เหตุการณ์นี้เริ่มทำงานเมื่อโมดอลถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)
$ ( '#myModal' ). on ( 'hidden.bs.modal' , function ( e ) {
// do something...
})