Zrozumienie danych odwołuje atrybut działa w Bootstrap

Question

Jestem nowy bootstrap i jestem w obliczu problemu z tym przykładzie:

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

Jak na moje rozumienie data-dismiss="modal" atrybut powinien zamknąć modal jeśli klikniesz na nim , ale nie rozumiem, jak to działa za sceną. Sprawdziłem oficjalną dokumentację: http://getbootstrap.com/javascript/#modals-examples, ale nie ma wyjaśnień.

Answer 1

dokładnie w bootstrap.js znajdź element z atrybutem data-dismiss="modal" i wyzwól this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) z tyłu. tj. ukrywa element, ale w bardziej złożony sposób.

Answer 2

Funkcja ukrywania jest w ten sposób zaimplementowana w modal.js.

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

Zasadniczo to tylko znalezienie elementów, które mają atrybut data-dismiss oraz wartość modal. Po kliknięciu ukryje te elementy.