การเรียกฟังก์ชันบน bootstrap modal open

ฉันเคยใช้กล่องโต้ตอบของ JQuery UI และมีopenตัวเลือกที่คุณสามารถระบุรหัส Javascript เพื่อเรียกใช้งานได้เมื่อเปิดกล่องโต้ตอบ ฉันจะใช้ตัวเลือกนั้นเพื่อเลือกข้อความภายในกล่องโต้ตอบโดยใช้ฟังก์ชั่นที่ฉันมี

ตอนนี้ฉันต้องการทำสิ่งนั้นโดยใช้คำสั่ง bootstrap ด้านล่างคือรหัส HTMl:

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

และสำหรับปุ่มที่เปิดเป็นกิริยาช่วย:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

ฉันพยายามใช้ฟังของปุ่ม แต่ข้อความแจ้งเตือนปรากฏขึ้นก่อนที่คำกริยาจะปรากฏขึ้น:

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

คุณสามารถใช้เหตุการณ์ที่แสดง / เหตุการณ์การแสดงขึ้นอยู่กับสิ่งที่คุณต้องการ:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

การสาธิต: พลั่ว

อัพเดตสำหรับ Bootstrap 3.0

สำหรับ Bootstrap 3.0 คุณยังสามารถใช้เหตุการณ์ที่แสดง แต่คุณจะใช้มันดังนี้:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

ดู Bootstrap 3.0 docs ที่นี่ภายใต้ "กิจกรรม"

จะไม่ทำงาน .. ใช้$(window)แทน

สำหรับการแสดง

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

สำหรับการซ่อน

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

คุณสามารถใช้showแทนshownการทำให้ฟังก์ชั่นโหลดก่อนที่จะเปิดเป็นกิริยาช่วยแทนหลังจากที่เปิดเป็นกิริยาช่วย

$('#code').on('show.bs.modal', function (e) {
  // do something...
})

Bootstrap modal ทำให้เกิดเหตุการณ์ ฟังshownเหตุการณ์เช่นนี้

$('#my-modal').on('shown', function(){
  // code here
});

หากใครบางคนยังคงมีปัญหาสิ่งเดียวที่ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันโดยใช้ (load.bs.modal):

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});

คุณสามารถใช้รหัส belw สำหรับการแสดงและซ่อนโมเดลบูตสแตรป

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

และถ้าคุณต้องการซ่อนโมเดลคุณสามารถใช้โค้ดด้านล่างได้

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

ฉันหวังว่าคำตอบนี้มีประโยชน์สำหรับโครงการของคุณ