如何从javascript隐藏Bootstrap模式？

Question

我已经阅读了这里的帖子,Bootstrap网站,以及Googled就像疯了一样 - 但找不到我确定的答案很简单......

我有一个Bootstrap模式,我从link_to帮助器打开,如下所示:

<%= 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>

Answer 1

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

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

如果它工作(并且模式关闭),那么您知道您的关闭Javascript 没有正确地从服务器发送到浏览器.

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

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

Answer 2

要关闭bootstrap 模态,你可以将'hide'作为选项传递给模态方法,如下所示

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

请看看这里的工作小提琴

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

如果上述方法不起作用,请为关闭按钮指定一个id并触发单击关闭按钮.

Answer 3

我使用Bootstrap 3.4对我来说这不起作用

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

无奈之下,我这样做了:

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

也许它不优雅,但它有效

Answer 4

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

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

Answer 5

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

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

Answer 6

$('#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

Answer 7

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

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

Answer 8

(参考Bootstrap 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

Answer 9

我遇到了我认为类似的问题.将$('#myModal').modal('hide');很可能通过该功能运行和打线

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

问题是,即使显示模态并且值应为true,值isShown也可能未定义.我已经将引导代码略微修改为以下内容

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

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

Answer 10

在"显示"回调发生后,我有更好的运气通话:

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

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

Answer 11

我们发现在调用服务器代码和返回成功回调之间只有一点点延迟.如果我们将调用包装到$("#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调用时,它将隐藏模态,然后调用服务器端代码.

Answer 12

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

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

Answer 13

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

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

Answer 14

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

这是方法：$（'＃myModal'）。modal（'hide'）

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

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

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

Answer 15

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

Answer 16

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

Answer 17

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

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

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

Answer 18

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

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

Answer 19

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

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