打开多个模式弹出窗口时如何关闭特定的引导模式弹出窗口？答案

【问题标题】：How to close particular bootstrap modal popup when multiple modal popups opened?打开多个模式弹出窗口时如何关闭特定的引导模式弹出窗口？
【发布时间】：2018-05-08 10:58:21
【问题描述】：

我在我的应用程序中使用引导模式。

在我的一个要求中，将在一个模式对话框上打开另一个模式对话框。对于这两个模式对话框，我设置了 data-backdrop 和 data-keyboard。

当我点击第二个模式对话框上的关闭按钮时，两个模式对话框都在关闭。

为了限制我写了一个函数来隐藏那个特定的模态对话框。

现在我的问题是我可以在关闭第一个模式对话框后看到整个页面的数据背景。

我用下面的方法克服了这个问题，但没有运气。

我使用的脚本函数是：

function preventCloseModal(ele) {
    $(ele).modal('hide');
    $('.modal-backdrop').remove()
}

关闭按钮的 HTML 是：

<button type="button" class="btn btn-default" onclick="preventCloseModal('#distributorDetailsPanel');">Close</button>

请建议克服这个问题。

【问题讨论】：

你说“现在我的问题是”......但是接下来的文字不是问题。你能澄清一下你的意思吗？
嗨 ADyson，使用上述 JavaScript 代码后，我可以关闭单个模式，但关闭所有模式弹出窗口后，该模式的背景仍然保持不变。

标签： jquery asp.net-mvc bootstrap-modal

【解决方案1】：

从下面的代码中参考正确的模式弹出格式。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .modal-header, h4, .close {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>

    </div>
  </div> 
</div>

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});
</script>

</body>
</html>

如果仍未解决，请共享整个代码 sn-p 以获得正确的解决方案。

【讨论】：

嗨 Manveer Singh，我可以弹出模态，但在我的要求中，我有 3 个模态，它们是根据要求填充的。因此，当关闭最新的模态时，其他 2 个模态仍然需要存在。但是使用提到的 JavaScript 代码（我在问题中提到的）我能够关闭特定的模态但未能删除模态的背景。

【解决方案2】：

在这种情况下，您可以像这样从按钮元素中找到最接近的模型。

function preventCloseModal(ele) {
            $(ele).closest(".modal").modal('hide');
            $(ele).closest('.modal-backdrop').remove()
        }

【讨论】：

感谢您的回复。您提供的代码 sn-p 正在运行，但这会禁用所有模式的背景。我只想删除该特定模式的背景。

【解决方案3】：

引导模式：关闭当前，打开新的无需额外的 Javascript/jQuery 即可完成此任务的正确且干净的方法。

启动模式 #1 启动模式#2 启动模式#3

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>

【讨论】：