logo标签列表

关闭Bootstrap模态框

jquerytwitter-bootstrapmodal-dialog
545

我有一个Bootstrap模态对话框，我希望它最初显示出来，然后当用户单击页面时，它会消失。 我有以下代码：

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

模态框初始时已显示，但在单击模态框外部时未关闭。另外，内容区域没有变灰。我该如何使模态框初始时显示，然后在用户单击区域外部后关闭？并且如何像演示中那样将背景变灰？

你是用 $("#yourModal").modal() 还是 $('.modal').modal() 来初始化你的模态框？ - merv
https://stackoverflow.com/questions/62053501/close-jquery-modal/62053789#62053789 - KushalSeth
30个回答
6
我们可以通过以下方式关闭模态弹出框：
// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.
6

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <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/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

错误："message"："未捕获的 TypeError：$（...）.modal 不是函数" - Ivan Burlutskiy
是的。如果在Chrome（Linux Mint）中“运行代码片段”，我会遇到错误。但在Firefox中它可以工作。 - Ivan Burlutskiy
1
@Ivan Burlutskiy，感谢您的通知。这是一个jQuery包含问题，我已经修复了它。现在在所有浏览器中都可以正常工作。 - Ganesh Putta
6

$('.modal.in').modal('hide');

使用上述代码可以隐藏模态框的背景，如果您在页面中使用多个模态框弹出。

或者只需要 $('.modal').modal('hide');。 - Matt Roy
6
   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };
嗨，谢谢你的回答。我已经将这个格式转换成了代码（这相当简单 - 只需要将第一行缩进更多就可以了）。不过我猜只有 $('#DeleteModal').modal('hide'); 是相关的吧？ - Rup
5

我用这个技巧程序化地关闭了模态框

在模态框中添加一个带有data-dismiss="modal"的按钮，并使用display: none隐藏该按钮。以下是示例：

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

现在，当您想要以编程方式关闭模态窗口时，只需在用户看不见的按钮上触发点击事件即可。

在Javascript中，您可以像这样触发该按钮的点击：

document.getElementById('close-modal').click();
5

经过测试，我发现对于bootstrap模态框，在执行$(.modal).modal('show')之后需要等待一段时间才能执行$(.modal).modal('hide')。在我的情况下，我发现这两者之间需要至少500毫秒的间隔。
因此，这是我的测试案例和解决方案：

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);
这解决了我在打开另一个模态框时无法关闭当前模态框的问题，谢谢。 - hal9000
4

您可以使用：

$('#' + $('.modal.show').attr('id')).modal('hide');
4

这对我很有用。虽然我是个新手，但请忽略我同时使用JQuery和Vanilla JavaScript的方式。

document.addEventListener("click",function(){
        $(".modal").modal('hide');
        });
4

在我的情况下，我使用了一个按钮来显示模态框

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

所以在我的代码中，要关闭具有id ='my-modal-to-show'的模态框，我调用该函数（在Angular TypeScript中）：

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

如果我调用$(modalId).modal('hide')，它不起作用，我不知道为什么。
PS：在我的模态框中，我也使用了.close类编码的按钮元素。
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>
3
使用 modal.hide 只会隐藏模态框。如果您在模态框下面使用了覆盖层，它仍然会存在。使用 click 事件调用来实际关闭模态框并移除覆盖层。
$("#modalID .close").click()
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接