Verstehen, wie Attributdaten-abtun arbeitet in Bootstrap

Question

Ich bin neues Problem zu Bootstrap und ich bin vor mit diesem Beispiel:

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

Gemäß meinem Verständnis data-dismiss="modal" Attribut sollte die modale schließen, wenn Sie darauf klicken , aber ich verstehe nicht, wie es hinter der Szene funktioniert. Ich überprüfte die offizielle Dokumentation unter: http://getbootstrap.com/javascript/#modals-examples, aber es gibt keine Erklärung.

Answer 1

genau in bootstrap.js finden Sie das Element mit Attribut data-dismiss="modal" und Trigger this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) hinter. d. h. es verbirgt das Element auf komplexere Weise.

Answer 2

Die Versteckfunktionalität wird auf diese Weise in modal.js implementiert.

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) 

Grundsätzlich findet es nur die Elemente, die das Attribut von data-dismiss und den Wert von modal haben. Beim Klicken werden diese Elemente ausgeblendet.