Search code examples
javascriptjquerytwitter-bootstrapjquery-eventstwitter-bootstrap-2

"On shown" event when manually use bootstrap modal


Problem appears when I try to show modal for the first time. Modal is shown but the shown event is fired when I drag the modal or click on the close button (I see the alert). I am using Bootstrap 2.3.2 with Firefox 26.0.

$("#modalXML").modal({ show: false });
$(document).on("click", "#idStart", function(){
    $("#modalXML").modal('show');
});

$("#modalXML").on("shown", function(){
   alert('juhu');
});

<a target="_blank" data-toggle="modal" href="#" class="clsXML" id="idStart" >Button</a>


<div id="modalXML" class="modal hide fade in">
    <div class="modal-header" id="">  
        <a class="close" data-dismiss="modal">×</a>  
        <h3>XML file</h3>  
    </div>  
    <div class="modal-body" id="idModalBodyXML">
        <textarea rows="10" cols="150" id="xmlTextArea">
        </textarea> 
    </div>
    <div class="modal-footer">  
        <button name="button" value="" data-dismiss="modal" class="btn">Close</button>
    </div>  
</div>

Solution

  • OK, I found where is a problem. Instead of

         <div id="modalXML" class="modal hide fade in">
    

    I set (without "in")

       <div id="modalXML" class="modal hide fade">
    

    Now, "on shown" event works.

    Thank you all.