data-dismiss="modal" closes all open modal dialog on same page in MVC partial view

Question

I am working on the two different partial views which is work together.

When using 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,

In my case I'm using a component inside a modal dialog box, that in turn uses modal dialog boxes.

You can find the things in image, 3 different views,

1. Black in the Background,
   

2. Edit (Partial view),
   

3. Warning Message(Partial view).

Multiple model open at the same time but need to close the expected, which is topmost/current not all models.

HTML

<div class="modal fade" id="myModal" ng-model="mymodel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title">Are you sure want to Change in Amount?</h2>
            </div>
            <div class="modal-body">
                <p class="text-danger" style="font-size:initial;color:black;font:200">Click save to change the Amount.&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-inverse" onclick="savedata()">Save</button>
                <button type="button" data-dismiss="modal" class="btn btn-inverse">Cancel</button>
            </div>
            <div class="row-fluid span12">

            </div>
        </div>
    </div>
</div>

Answer 1

Remove data-dismiss="modal" from the button and Using Jquery you can close a particular modal.Create a function and have the below code inside the function and call that function on the close button click

$('#modalid').modal('hide');