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');

Answer 2

That works for me. Only Close that modal. No extra function.

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

Answer 3

Instead of data-dismiss make a custom method and set its display as none. This worked for me.

     <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-md">
              <div class="modal-content" >
                <div class="modal-header">  
                  <button type="button" class="close"  (click)="closeModal()">&times; 
                  </button>
               </div>
             </div>
           </div>
        </div>


        closeModal() {            
           document.getElementById("myModal").style.display = "none";
        }

Answer 4

these two lines together will work

$('#you_model_id').hide();
$( ".modal-backdrop" ).first().css( "display", "none" ); 

Since every model will add a shadow layer; so, while closing the model manually; you need to remove its shadow layer; besides hiding it You can view the shadow layer div at the end of HTML page; with class = modal-backdrop