disable outside click if popup is open - html

Question

I am using bootstrap, My scenario is as follows:
There is a button, on clicking button I am opening up a popup and in that popup there is a button that is again opening up a new popup. Now I am trying to disable outside click when my popups are open. However when first popup is open then I have already disabled the outside click, but when it is not happening for 2nd popup.
I have used these attributes on button:
<button type="button" name="delete" class="btnbmbm" data-toggle="modal" data-target="#delete-user-confirm" data-backdrop="static" data-keyboard="false">Delete Me </button>
And here is complete html file:
<div class="page account-page customer-info-page customer-delete-info">
<div class="page-body">
<div class="form-fields">
<input type="hidden" value="#ViewBag.CustomerId" id="customerId" />
<div class="del-section">
#await Component.InvokeAsync("TopicBlock", new { systemName = "DeleteInformation" })
</div>
<div class="buttons">
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" data-target="#delete-user-confirm" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteMe")
</button>
</div>
</div>
<div id="delete-user-confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-user-title">
<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">×</span></button>
<h4 class="modal-title">#T("Plugins.Tmotions.GDPR.User.DeleteConfirmation")</h4>
</div>
<div class="form-horizontal">
<div class="modal-body">
#T("Plugins.Tmotions.GDPR.User.DeleteWarning")
</div>
<div class="modal-footer">
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" id="delete-confirm" data-target="delete-user-done" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteYes")
</button>
<button type="button" class="btn btn-primary btn-search" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> #T("Plugins.Tmotions.GDPR.User.DeleteNo")</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="delete-user-done" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-user-done-title">
<div class="modal-dialog">
<div class="modal-content">
#*<div class="modal-header">
<button type="button" class="close delete-ok"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>*#
<div class="form-horizontal">
<div class="modal-body">
<p class="delete-user-notification"></p>
<p> </p>
<p> #T("Plugins.Tmotions.GDPR.User.DeleteUserNotification2")</p>
</div>
<div class="modal-footer">
#T("Plugins.Tmotions.GDPR.User.Ok")
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Your code is fine. Your second modal doesn't close when clicked outside. Check the snippet. All you are missing is the # on your data-target attribute on your button.
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" id="delete-confirm" data-target="#delete-user-done" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteYes")
</button>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page account-page customer-info-page customer-delete-info">
<div class="page-body">
<div class="form-fields">
<input type="hidden" value="#ViewBag.CustomerId" id="customerId" />
<div class="del-section">
#await Component.InvokeAsync("TopicBlock", new { systemName = "DeleteInformation" })
</div>
<div class="buttons">
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" data-target="#delete-user-confirm" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteMe")
</button>
</div>
</div>
<div id="delete-user-confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-user-title">
<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">×</span></button>
<h4 class="modal-title">#T("Plugins.Tmotions.GDPR.User.DeleteConfirmation")</h4>
</div>
<div class="form-horizontal">
<div class="modal-body">
#T("Plugins.Tmotions.GDPR.User.DeleteWarning")
</div>
<div class="modal-footer">
<button type="button" name="delete" class="btn btn-primary btn-search" data-toggle="modal" id="delete-confirm" data-target="#delete-user-done" data-backdrop="static" data-keyboard="false">
#T("Plugins.Tmotions.GDPR.User.DeleteYes")
</button>
<button type="button" class="btn btn-primary btn-search" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> #T("Plugins.Tmotions.GDPR.User.DeleteNo")</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="delete-user-done" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-user-done-title">
<div class="modal-dialog">
<div class="modal-content">
#*<div class="modal-header">
<button type="button" class="close delete-ok"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>*#
<div class="form-horizontal">
<div class="modal-body">
<p class="delete-user-notification"></p>
<p> </p>
<p> #T("Plugins.Tmotions.GDPR.User.DeleteUserNotification2")</p>
</div>
<div class="modal-footer">
#T("Plugins.Tmotions.GDPR.User.Ok")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>