如何隐藏引导模式与javascript?

我读了Bootstrap网站上的帖子，疯狂地谷歌了一下——但我肯定找不到一个简单的答案……

我有一个Bootstrap模式，我从一个link_to helper像这样打开:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

在我的ContactsController.create操作中，我有创建Contact然后传递给create.js.erb的代码。在create.js.erb中，我有一些错误处理代码(ruby和javascript的混合)。如果一切顺利，我想关闭模态。

这就是我遇到麻烦的地方。当一切顺利的时候，我似乎不能放弃模态。

我已经尝试了$('#myModal').modal('hide');，这没有效果。我还尝试了$('#myModal').hide();，它导致模态解散，但留下背景。

关于如何在create.js.erb中关闭模式和/或解散背景有任何指导吗?

编辑

下面是myModal的标记:

<div class="modal hide" id="myModal" >
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Contact</h3>
<div id="errors_notification">
</div>
</div>
<div class="modal-body">
<%= form_for :contact, url: contacts_path, remote: true do |f| %>
<%= f.text_field :first_name, placeholder: "first name" %>
<%= f.text_field :last_name, placeholder: "last name" %>
<br>
<%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
<a class="close btn" data-dismiss="modal">Cancel</a>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
776231 次浏览
小开

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

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

如果它工作(并且模式关闭)，那么你知道你的关闭Javascript是不被正确地从服务器发送到浏览器。

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

浏览器控制台:firefox的firebug, Chrome或Safari的调试控制台等。

小开

我也遇到过类似的问题。$('#myModal').modal('hide');很可能运行该函数并命中该行

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

问题是，即使显示了模态，且该值应该为真，isshows值也可能是未定义的。我对引导代码进行了如下修改

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

这似乎在很大程度上解决了问题。如果背景仍然存在，你总是可以在隐藏调用$('.modal-backdrop').remove();之后添加一个调用来手动删除它。一点也不理想，但确实有用。

小开

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

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

(参考引导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
小开

要关闭引导< >强模态< / >强，可以将“隐藏”作为选项传递给模态方法，如下所示

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

请看看工作提琴在这里

bootstrap也提供了你可以钩到模态功能的事件，比如如果你想在模态完成对用户隐藏时触发一个事件，你可以使用hidden.bs.modal事件，你可以在< a href = " http://getbootstrap.com/javascript/情态动词" > < / >文档中阅读更多关于模态方法和事件的信息

如果以上方法都不起作用，给你的关闭按钮一个id并触发点击关闭按钮。

小开

我有更好的运气在“显示”回调发生后进行调用:

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

这确保了模态在调用hide()之前完成加载。

小开

我遇到了同样的错误，这行代码真的帮助了我。

$("[data-dismiss=modal]").trigger({ type: "click" });
小开
我使用Bootstrap 3.4 对我来说，这并不管用

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

无奈之下，我这样做了:

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

也许这并不优雅，但很有效

小开

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

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

以下是doc: http://getbootstrap.com/javascript/#modals-methods < / p > 下面是方法: $ (' # myModal ') .modal(隐藏的)< / p >

如果你需要多次打开不同内容的模态，我建议添加(在你的主js中):

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

因此，您将为下一个开放清理内容，并避免某种缓存

小开

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

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

我知道这是一个老问题，但我发现这些都不是我真正想要的。这似乎是由于试图关闭模式之前，它完成显示。

我的解决方案是基于@schoonie23的答案，但我必须改变一些东西。

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

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

然后在我的模态代码中:

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

然后这个:(注意名称'show .bs. ')Modal '表示模式已经完全显示，而不是show事件被调用时触发的'show'。(我最初只是试着“显示”，但没有用。)

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

希望有一天这能帮别人省下额外的研究。在我想到这个之前，我花了一点时间寻找解决方案。

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

用bootstrap隐藏和显示模态的最佳形式是

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('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被调用时，它将隐藏模式，然后调用服务器端代码。

小开
这是一个不好的做法，但你可以使用这种技术通过在javascript中调用close按钮来关闭模式。 这将在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>
小开

就连我也有同样的问题。这对我帮助很大

$("[data-dismiss=modal]").trigger({ type: "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
小开

$('#modal').modal('hide');及其变体对我不起作用，除非我在Cancel按钮上有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();
小开

如果你在情态动词中使用close类，下面的方法可以工作。根据您的用例，如果close类有多个模态，我通常建议只过滤到可见模态。

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

我用了这个代码-

隐藏模式与平滑效果使用淡出。

$('#myModal').fadeOut();


$('.modal-backdrop').fadeOut();


$('.modal-open').css({'overflow': 'visible'});
小开

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

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

. getelementbyid (closeButton) .click ();//添加data-dismiss="modal"属性到modal中的元素，并给它这个id

小开

隐藏模式背景工作，但随后打开模式和背景不像它应该隐藏。我发现这种方法始终有效:

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


// HIDE
$('#myModal').modal('hide');
$('.modal-backdrop').hide();
小开

有时

$('#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();
小开

我面临着一个类似的问题，我的自定义模态将通过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，它会很高兴地显示模态，但在这里的一些答案中，如果没有手动解决方案，它是不可能隐藏的，其中一些阻止了你能够再次显示模态。

小开

在我的情况下，我显然是试图在显示对话框后过快地关闭它。所以在我的闭合模态函数中，我使用了这个:

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

提交答案