Capire come i dati-respingere attributo funziona in Bootstrap

Question

Sono nuovo di bootstrap e sto affrontando problema con questo esempio:

<!-- 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> 

Come per la mia comprensione data-dismiss="modal" attributo deve chiudere il modale se si fa clic su di esso , ma non capisco come funzioni dietro la scena. Ho controllato la documentazione ufficiale a: http://getbootstrap.com/javascript/#modals-examples ma non c'è spiegazione.

Answer 1

esattamente in bootstrap.js trovare l'elemento con attributo data-dismiss="modal" e attivare this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) dietro. cioè nasconde l'elemento ma in modo più complesso.

Answer 2

La funzionalità di occultamento è implementata nel modal.js in questo modo.

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

Fondamentalmente si tratta solo di trovare gli elementi che hanno l'attributo della data-dismiss e il valore della modal. Al clic, nasconderà questi elementi.