Menu
I'm new to Bootstrap and i'm facing problem with this example:
<!-- 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">×</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> As per my understanding data-dismiss="modal" attribute should close the modal if you click on it, but i don't understand how it works behind the scene. I checked the official documentation at: http://getbootstrap.com/javascript/#modals-examples but there's no explaination.
437
The "Modal content" part: Inside this <div> , add the modal's header, body, and footer. The . modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it.
There are few ways to close modal in Bootstrap: click on a backdrop, close icon, or close button. You can also use JavaScript hide method. Click the button to launch the modal. Then click on the backdrop, close icon or close button to close the modal.
data-toggle = “collapse” It is used when you want to hide a section and make it appear only when a div is clicked. Say, the div is a button, so when the button is clicked, the section that you want to collapse appears and re-appears using the button. Example: HTML.
The hiding functionality is implemented in the modal.js in this way.
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) Basically it's just finding the elements that have the attribute of data-dismiss and the value of modal. Upon click it will hide these elements.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
