我正在使用bootstrap，我的场景如下：
有一个按钮，点击按钮我打开一个弹出窗口，弹出窗口中有一个按钮，再次打开一个新的弹出窗口。现在我正在尝试在弹出窗口打开时禁用外部点击。但是，当第一个弹出窗口打开时，我已经禁用了外部点击，但是当第二个弹出窗口没有发生时。
我在按钮上使用了这些属性：
<button type="button" name="delete" class="btnbmbm" data-toggle="modal" data-target="#delete-user-confirm" data-backdrop="static" data-keyboard="false">Delete Me </button>
这是完整的html文件：
<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">
<a href="@Url.RouteUrl("Logout")" class="ico-logout btn btn-primary btn-search" data-controls-modal="delete-user-done" data-backdrop="static" data-keyboard="false"> @T("Plugins.Tmotions.GDPR.User.Ok")</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
你的代码很好。在外面点击时，你的第二个模态不会关闭。检查代码段。您遗失的只是#上data-target属性的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">
<a href="@Url.RouteUrl("Logout")" class="ico-logout btn btn-primary btn-search" data-controls-modal="delete-user-done" data-backdrop="static" data-keyboard="false"> @T("Plugins.Tmotions.GDPR.User.Ok")</a>
</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>