关闭Bootstrap模态框

Question

关闭Bootstrap模态框

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>

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

- Nick B

你是用 $("#yourModal").modal() 还是 $('.modal').modal() 来初始化你的模态框？ - merv

https://stackoverflow.com/questions/62053501/close-jquery-modal/62053789#62053789 - KushalSeth

30个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Orozcorp · Answer 1

另一种方法是先移除 modal-open 类，这将关闭模态框。然后移除 modal-backdrop 类，这将移除模态框的灰色遮罩。

可以使用以下代码：

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()

- Muhammad Awais · Answer 2

在我的情况下，使用 $("#modal").modal('toggle'); 打开bootstrap模态框后，主页面开始无响应，但以下方式可以使其恢复响应：

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

- Edgar256 · Answer 3

这个效果很好

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

然而，当你有多个模态框叠加在一起时，这种方法并不有效，所以相反的，这样做可以解决问题。

data-dismiss="modal"

- Ahmed · Answer 4

只需在模态框中添加此代码即可。

div tabindex="-1"

- Ehsäɳ Khʌɳ · Answer 5

试一下这个

 $('#yourmodal').click();

- user3870075 · Answer 6

这段代码在关闭模态框时对我非常有效（我使用的是Bootstrap 3.3）。

$('#myModal').removeClass('in')

- Zoltán Süle · Answer 7

我的回答并不是严格与上面很多其他回答相关的问题。但是这些对话帮助我弄清楚了为什么当我点击一个非常普通的关闭按钮时，我的bootstrap模态框不会反应，而当我按下ESC键时它仍然关闭了。

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

希望这能对某些人有所帮助。

如果你在代码中加入以下内容（在某些特殊情况下，这是有意义的）：

$modal.off('click')

那么也就意味着模态框不会关闭，因为事件被阻止了。

在这种情况下，您需要自己处理：

$modal
  .on('click', '[data-dismiss="modal"]', function() {
      $modal.modal('hide');
  });

- عبد الرحمان بويشو · Answer 8

有时候，上述解决方案无效，因此您需要手动删除类中的内容，并添加css display:none来解决问题。

$("#modal").removeClass("in");
$("#modal").css("display","none");

- slashka · Answer 9

此外，您可以“点击”一个 'x'，以关闭对话框。例如：

$(".ui-dialog-titlebar-close").click();

- user17087887 · Answer 10

你可以尝试使用这个，只需添加

div tabindex="-1"

在你的HTML和jQuery中，你可以使用以下代码：

$('#myModal').modal('hide')

或者

$('#myModal').modal('toggle')