จะจัดการกับเหตุการณ์ปิดคำสั่งใน Twitter Bootstrap ได้อย่างไร

ใน Twitter bootstrap ดูที่เอกสารคู่มือ modals ฉันไม่สามารถเข้าใจได้ว่ามีวิธีฟังเหตุการณ์ปิดของคำกริยาและเรียกใช้ฟังก์ชันหรือไม่

เช่นให้ใช้คำกริยานี้เป็นตัวอย่าง:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

ปุ่ม X ที่ด้านบนและปุ่มปิดที่ด้านล่างสามารถซ่อน / ปิดคำกริยาdata-dismiss="modal"ได้ ดังนั้นฉันสงสัยว่าถ้าฉันสามารถฟังอย่างนั้น?

อีกทางหนึ่งฉันสามารถทำได้ด้วยตนเองเช่นนี้ฉันเดา ...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

คุณคิดอย่างไร?

อัพเดตสำหรับ Bootstrap 3 และ 4

Bootstrap 3และBootstrap 4 docs อ้างถึงสองเหตุการณ์ที่คุณสามารถใช้ได้

hide.bs.modal : เหตุการณ์นี้เกิดขึ้นทันทีเมื่อมีการเรียกใช้วิธีการซ่อนอินสแตนซ์
hidden.bs.modal : เหตุการณ์นี้เกิดขึ้นเมื่อ modal เสร็จสิ้นการซ่อนจากผู้ใช้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)

และให้ตัวอย่างเกี่ยวกับวิธีใช้:

$('#myModal').on('hidden.bs.modal', function () {
  // do something…
})

Legacy Bootstrap 2.3.2 คำตอบ

เอกสารประกอบของ Bootstrapหมายถึงสองเหตุการณ์ที่คุณสามารถใช้ได้

ซ่อน : เหตุการณ์นี้เกิดขึ้นทันทีเมื่อมีการเรียกใช้วิธีการซ่อนอินสแตนซ์
hidden : เหตุการณ์นี้เกิดขึ้นเมื่อ modal เสร็จสิ้นการซ่อนจากผู้ใช้ (จะรอให้การเปลี่ยน css เสร็จสมบูรณ์)

และให้ตัวอย่างเกี่ยวกับวิธีใช้:

$('#myModal').on('hidden', function () {
    // do something…
})

หาก dival ของคุณถูกเพิ่มเข้ามาแบบไดนามิกให้ใช้ (สำหรับ bootstrap 3)

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

สิ่งนี้จะใช้งานได้กับเนื้อหาที่ไม่ใช่แบบไดนามิกด้วย

มีเหตุการณ์กิริยาสองคู่หนึ่งเหตุการณ์คือ "แสดง" และ "แสดง" อีกเหตุการณ์หนึ่งคือ "ซ่อน" และ "ซ่อน" อย่างที่คุณเห็นจากชื่อให้ซ่อนเหตุการณ์ที่เกิดขึ้นเมื่อ modal ใกล้จะปิดเช่นคลิกที่กากบาทที่มุมบนขวาหรือปุ่มปิดเป็นต้น ในขณะที่ซ่อนถูกไล่ออกหลังจากที่เป็นกิริยาช่วยปิดจริง คุณสามารถทดสอบเหตุการณ์เหล่านี้ด้วยตนเอง สำหรับ exampel:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

และสำหรับคำถามของคุณฉันคิดว่าคุณควรฟังเหตุการณ์ 'ซ่อน' ของคำกริยาของคุณ

Bootstrap Modal Events:

1. hide.bs.modal => เกิดขึ้นเมื่อ modal กำลังจะถูกซ่อน
2. hidden.bs.modal => เกิดขึ้นเมื่อ modal ถูกซ่อนอย่างสมบูรณ์ (หลังจากการเปลี่ยน CSS เสร็จสมบูรณ์)

<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

ฉันหวังว่านี่จะช่วยได้