Understanding how data-dismiss attribute works in Bootstrap

I'm new to Bootstrap and i'm facing problem with this example:

<!-- Trigger the modal with a button --> <button type="button">Open Modal</button> <!-- Modal --> <div> <div> <!-- Modal content--> <div> <div> <button type="button">&times;</button> <h4>Modal Header</h4> </div> <div> <p>Some text in the modal.</p> </div> <div> <button type="button">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: but there's no explaination.

4 Answers

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.

replace data-dismiss="modal" by: onclick="$('#modal_id').modal('hide');"

You should have something like this:

<button type="button" onclick="$('#modal_id').modal('hide');" aria-label="Close"> 

onclick="$('#modal_id').modal('hide');" will close only the particular modal in which it is placed.

please note if it is this answer is useful.

If u use multiple modals on one page open at the same time on top of each other dismissing the topmost with data-dismiss="modal" will hide all active modals.

exactly in bootstrap.js find the element with attribute data-dismiss="modal" and trigger this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) behind. i.e. it hides the element but in more complex way.