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>