另一个模式中的引导模式 - 关闭按钮问题答案

【问题标题】：Bootstrap modal inside another modal - Close Button Issue另一个模式中的引导模式 - 关闭按钮问题
【发布时间】：2021-02-20 19:49:47
【问题描述】：

在我的 JSP 页面中，我有一个模式，它显示了一个页面，该页面具有另一个模式（内部模式）。

第一个模态：

<div class="modal-dialog modal-lg"  style="background: white;  width: 90% !important">
<input type="hidden" id="report-request-data-id" value="${requestId}"/>
<div class="modal-body">
  <div id="reportDataDetailsDiv"></div>
</div>
<div class="modal-footer">
              
    <label class="btn-is float">
        <spring:message code='close.label'/>
        <input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
    </label>
              
    </div>
</div>

内部模态（加载在上面id为“reportDataDetailsDiv”的div中）：

<div class="modal-dialog modal-lg" style="background: white;border-radius: 6px;">
<div class="modal-body">
<div class="modal-content">
<div class="col-centered col-lg-12 col-xs-12 ">


.....etc


<div class="modal-footer">
              
        <label class="btn-is float">
            <spring:message code='close.label'/>
            <input type="button" class="cus-close-modal-btn col-xs-3 col-lg-1 col-md-1" style="display: none;"/>
        </label>
              
    </div>
    </div>
    </div>
</div>

当我单击内部模式中的关闭按钮时会出现问题。当我这样做时，两个模态都会关闭，但我希望关闭动作对于每个模态都是独立的。我应该如何正确地做到这一点？

谢谢。

【问题讨论】：

嗨，其他模态如何显示？另外，你能用jquery吗？
它是使用 Ajax 调用在 Javascript 中加载的。是的，我使用 jquery 来处理内部模式的关闭。但是一旦关闭，第一个模态就被冻结并且无法滚动。因此，我需要一种干净的方式来做到这一点。

标签： javascript jsp bootstrap-4 modal-dialog bootstrap-modal

【解决方案1】：

当您在主模式内的reportDataDetailsDiv 中加载其他模式时，您可以使用.show() 显示它，并且每当单击close 按钮时，您可以删除整个div，它添加在reportDataDetailsDiv 中。

演示代码：

//suppose other modal is added like below
$(".addmodal").click(function() {
  //append modal undr div
  $("#reportDataDetailsDiv").html('<div class="modal-dialog modal modal-child" style="background: white;border-radius: 6px;" ><div class="modal-body"><div class="modal-content">Some message to show ....<div class="col-centered col-lg-12 col-xs-12 "><div class="modal-footer">  <label class="btn-is float"><input type="button" class="cus-close-modal-btn " value ="Close" style=""/> </label> </div></div></div></div>')
  $(".modal-child").show(); //show that modal
  $(this).hide();
  $("#close_report_request_view").prop('disabled', true);//disable main modal button
})

//onclick of close button for modal added
$(document).on('click', '.cus-close-modal-btn', function() {
  $(this).closest(".modal-child").remove(); //remove whole div
  $("#close_report_request_view").prop('disabled', false);//enable main modal buton
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Click to open modal</a>
<div class="modal-dialog modal fade modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="background: white;  width: 90% !important">
  <input type="hidden" id="report-request-data-id" value="1" />
  <div class="modal-body">
    <div id="reportDataDetailsDiv"></div>
  </div>
  <button class="addmodal btn btn-primary">Click me to open other modal</button>
  <div class="modal-footer">
    <label class="btn-is float">
      Close
        <input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
    </label>

  </div>
</div>

【讨论】：