Understanding how data-dismiss attribute works in Bootstrap

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

You should have something like this:

<button type="button" class="close" 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.

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.

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.