如何使用 javascript 隐藏 Bootstrap 模式

在浏览器窗口中打开模式后，使用浏览器的控制台尝试

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

如果它工作（并且模态关闭），那么你就知道你的关闭Javascript没有从服务器正确发送到浏览器。

如果它不起作用，那么您需要进一步调查客户端正在发生的事情。例如，确保没有两个具有相同 id 的元素。例如，它在页面加载后第一次工作，但第二次不起作用？

浏览器控制台：Firefox的Firebug，Chrome或Safari的调试控制台等。

要关闭引导模态，您可以将"hide"作为选项传递给模态方法，如下所示

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

请在这里看看工作小提琴

bootstrap 还提供了可以挂接到模态功能的事件，例如，如果要在模态完成对用户隐藏时触发事件，则可以使用 hidden.bs.modal 事件，您可以在文档中阅读有关模态方法和事件的更多信息

如果上述方法都不起作用，请为您的关闭按钮提供一个 id 并触发单击关闭按钮。

隐藏和显示带有引导的模态的最佳形式

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

我使用 Bootstrap 3.4对我来说这行不通

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

无奈之下，我做了这个：

$('#myModal').hide();
$('.modal-backdrop').hide();

也许它不优雅，但它有效

我遇到了同样的错误，这行代码确实对我有帮助。

$("[data-dismiss=modal]").trigger({ type: "click" });

我找到了可以使用此代码的正确解决方案

$('.close').click(); 

$('#modal').modal('hide'); 
//hide the modal
$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed
$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class

我遇到了我认为是类似的问题。 $('#myModal').modal('hide');可能贯穿该函数并命中

if (!this.isShown || e.isDefaultPrevented()) return

问题是值 isShow 可能未定义，即使显示了模态并且值应为 true。 我将引导代码稍微修改为以下内容

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

这似乎在很大程度上解决了这个问题。 如果背景仍然存在，您可以随时添加一个调用以在隐藏调用$('.modal-backdrop').remove();后手动将其删除。 根本不理想，但确实有效。

（指引导程序 3），隐藏模式使用：$('#modal').modal('hide') 。但是背景徘徊的原因（对我来说）是因为我在"隐藏"完成之前破坏了模态的 DOM。

为了解决这个问题，我将隐藏事件与 DOM 删除链接在一起。就我而言：this.render()

var $modal = $('#modal');
//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});
$modal.modal('hide'); //start hiding

"显示"回调发生后，我有更好的运气进行调用：

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

这确保了在进行 hide（） 调用之前完成模态加载。

我们发现，在调用服务器代码和返回成功回调之间只有轻微的延迟。 如果我们将对服务器的调用包装在$("#myModal").on('hidden.bs.modal', function (e)处理程序中，然后调用 $("#myModal").modal("hide"); 方法，浏览器将隐藏模式，然后调用服务器端代码。

同样，不优雅，但功能齐全。

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

如您所见，当调用myFunc时，它将隐藏模式，然后调用服务器端代码。

隐藏模态背景有效，但随后任何后续打开的模态和背景都不会像它应该的那样隐藏。 我发现这始终有效：

// SHOW
$('#myModal').modal('show')
$('.modal-backdrop').show();
// HIDE
$('#myModal').modal('hide');
$('.modal-backdrop').hide();

我使用了这个简单的代码：

$("#MyModal .close").click();

我遇到了同样的问题，经过一些实验，我找到了解决方案。在我的点击处理程序中，我需要阻止事件冒泡，如下所示：

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

这是文档：http://getbootstrap.com/javascript/#modals-methods

这是方法： $（'#myModal'）.modal（'hide'）

如果您需要打开具有不同内容的模态几次，我建议添加（在您的主要js中）：

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

因此，您将清理下次打开的内容并避免一种缓存

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

即使我也有同样的问题。这对我帮助很大

$("[data-dismiss=modal]").trigger({ type: "click" });

$('#modal').modal('hide');及其变体对我不起作用，除非我在"取消"按钮上data-dismiss="modal"作为属性。像你一样，我的需求是根据一些额外的逻辑可能关闭/可能不关闭，因此直接单击带有data-dismiss="modal"的链接是不行的。我最终有一个隐藏的按钮，其中包含data-dismiss="modal"，我可以通过编程方式从中调用点击处理程序，所以

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

然后在需要关闭模式时取消的单击处理程序中，您可以拥有

$('#hidden-cancel').click();

就我而言，我显然试图在显示对话框后关闭对话框太快。 所以在我的接近模态函数中，我使用了这个：

setTimeout(() => {
    $('#loadingModal').modal('hide');
}, 300);

我们需要处理事件冒泡。需要添加一行代码

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

我意识到这是一个老问题，但我发现这些都不是我真正想要的。这似乎是由于试图在模态完成显示之前关闭模态引起的。

我的解决方案是基于@schoonie23的回答，但我不得不改变一些事情。

首先，我在脚本顶部声明了一个全局变量：

<script>
    var closeModal = false;
    ...Other Code...

然后在我的模态代码中：

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

然后这个：（注意名称"display.bs.modal"表示模态已完全显示，而不是在调用显示事件时触发的"show"。（我最初尝试只是"显示"，但它不起作用。

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

希望有一天这可以为某人节省额外的研究。在我想出这个之前，我花了一些时间寻找解决方案。

document.getElementById（'closeButton'）.click（）;//将 data-dismiss="modal" 属性添加到模态中的元素并赋予它此 id

我使用了这段代码 -

使用淡出隐藏具有平滑效果的模式。

$('#myModal').fadeOut();
$('.modal-backdrop').fadeOut();
$('.modal-open').css({'overflow': 'visible'});

我遇到了类似的问题，我的自定义模式将通过 js 显示，但我无法隐藏它（没有关闭按钮）。

对我来说，解决方案是将内容添加到modal-dialog中。

<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="loading">
  <div class="modal-dialog">
    loading
  </div>
</div>

如果没有modal-dialog它会很高兴地显示模态，但是如果没有此处某些答案中的手动解决方案，就不可能隐藏它，其中一些会阻止您再次显示模态。

如果您在模态中使用关闭类，则以下内容将起作用。根据您的用例，如果有多个具有关闭类的模态，我通常建议仅过滤到可见模态。

$('.close:visible').click();

这是不好的做法，但您可以使用此技术通过在 javascript 中调用关闭按钮来关闭模式。这将在 3 秒后关闭模式。

<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
window.onload=function()
{
setInterval(function(){ 
$("#closemodal").click();
}, 3000);
}
</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" id="closemodal">Close</button>
    </div>
  </div>
</div>
</div>
 </div>
</body>
</html>

有时

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

没有完成工作，因此您需要将其添加到模态的页脚：

<button type="button" id="close_cred_modal" class="btn btn-secondary" data-dismiss="modal">Close</button>

然后添加此行以关闭模态

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