如何使用JavaScript隐藏Bootstrap模态?


280

我已经读过这里的文章,Bootstrap网站以及疯狂的Googled-但找不到我确定这是一个简单的答案...

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

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

1
$('#myModal').modal('hide');是使用id关闭/隐藏模式的正确语法myModal(您可以在Bootstrap文档页面上进行测试)。您确定页面上有一个具有此ID的元素吗?另外,您想通过此通话完成什么?您当前的实现对进行Ajax请求,new_contact_path并同时打开具有以下内容的模式#myModal-这是您想要的吗?
朱利安·D。

嗨朱利安 我在上面发布了myModal标记,确实有一个id为的div myModal。我重试$('myModal').modal('hide'),仍然没有好处。HM。就我要完成的任务而言,我认为使用link_to助手可能是不正确的。我已将其替换为:<a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>因为我真的不需要致电new_contact_path。我只想打开模式,然后处理用户输入。感谢您抽出宝贵的时间来回复。我看看是否无法解决这个问题。
2012年

我想这只是一个错字,但电话应该是$('#myModal').modal('hide');#您的评论中缺少内容)。
朱利安

1
我不好输入而不是从实际代码中复制。实际代码为:$('#myModal').modal('hide')。J
jvillian

您可以尝试使用bootboxjs
md。ariful ahsan 2014年

Answers:


492

在浏览器窗口中以模式打开的情况下,使用浏览器的控制台尝试

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

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

如果它不起作用,则需要在客户端上进一步调查正在发生的事情。例如,确保没有两个具有相同ID的元素。例如,它是在页面加载后第一次但不是第二次工作吗?

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


第二段是我想要的。重复的ID使我的模态无法第二次正确显示。
Matias 2015年

这为我解决了这个问题。谢谢。
Finchy70

76

要关闭引导程序模态,可以将“ hide”作为选项传递给模态方法,如下所示

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

请在这里看看工作小提琴

引导程序还提供了可以挂接到模态功能的事件,例如,如果您希望在向用户隐藏模态完成后触发事件,则可以使用hidden.bs.modal事件,您可以在此处阅读有关模态方法和事件的更多信息。文献资料

如果以上方法均无效,请为您的关闭按钮提供一个ID,然后触发点击关闭按钮。


1
当您确切知道模态对话框应该在什么时候关闭时,此功能特别有用。例如在成功函数的末尾。这样,如果有错误,对话框可以显示它。
2014年

47

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

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

无奈之下,我这样做:

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

也许它不优雅,但可以


2
如果使用$(“。modal-backdrop”)。remove();会更好。
猎犬(Bloodhound)

1
这将引入新的错误。请使用推荐的方法,
本杰明·埃克斯坦

jQuery('。modal-backdrop')。click();

小车,但肯定可以。 曼努埃尔·费尔南多Manuel Fernando)的以下解决方案非常适合我。
Munam Yousuf

如果此处提到的方法不好,并且您知道一种方法,则@Umingo请推荐一种方法。
跨越

47

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

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

迄今为止最好的答案。从长远来看,通过单击,jQuery fadeOut或css模拟行为可能会导致对齐错误。
Giorgio Tempesta

43

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

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

1
我读过另一个问题,表明该问题可能是该元素具有data-dismiss属性,然后在此尝试从javascript触发它
Femtosecond

非常感谢Manuel,这是在经过大量搜索后解决了我的问题,$('#MyModelId')。modal('hide'); $(“ [data-dismiss = modal]”)。trigger({type:“ click”}); 我想关闭有关Ajax成功的模式....非常感谢亲爱的
Abdelrhman raafat

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

它起作用了,但是如果我再次打开它就会破坏模态,模态不再滚动了
kosas


11

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

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

问题是,即使显示了模态且值应为true,值isShown仍可能是未定义的。我对引导代码进行了一些修改,如下所示

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

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


11

(请参阅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

1
但能否请您告诉我有关this.render()undefined is not a function在Chrome控制台中显示的信息。
Anil Kumar Pandey 2014年

9

在“显示”回调发生后,我最好打个电话:

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

这样可以确保在进行hide()调用之前已完成加载模态。


8

我们发现,在调用我们的服务器代码与返回成功回调之间仅存在一点延迟。如果我们将对服务器的调用包装在$("#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被调用时,它将隐藏模式,然后调用服务器端代码。


6

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

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


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

5

甚至我也有同样的问题。这对我很有帮助

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


4

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

以我的情况(asp net razor page)为例,它与OP相似:我的类div有点空,类为“ modal”,并向其中动态添加了一个cshtml文件,例如modal主体,并单击了此按钮模态将立即显示。如您指出的那样,仅调用“ .modal('hide)”还是不够的,正如您所指出的那样:调用按钮上的“ data-dismiss =” modal“”很重要!!!ty
Csharpest

3

我们需要注意事件冒泡。需要添加一行代码

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

3

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

我的解决方案基于@ schoonie23的答案,但我不得不更改一些内容。

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

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

然后在我的模态代码中:

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

然后这:(请注意名称“ shown.bs.modal”,表明该模式已完全显示,而不是在调用show事件时触发的“ show”。(我本来只是尝试“ shown”,但没有用。 )

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

希望这能节省某人额外的研究时间。在提出这个建议之前,我花了一些时间寻找解决方案。


1

我使用了这段代码-

使用淡出功能以平滑效果隐藏模态。

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

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

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

1

如果您在模态中使用close类,则可以执行以下操作。根据您的用例,如果封闭类有多个模态,通常建议仅过滤到可见模态。

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

0

document.getElementById('closeButton')。click(); //向模式中的元素添加data-dismiss =“ modal”属性,并为其指定该ID


-1

这是不好的做法,但是您可以使用此技术通过调用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>

-2

这可以只用HTML来完成:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>

@KevinFrancis因为问题正在寻找一种通过编程方式从控制器执行此操作的方法,而不是如何制作一个可以执行此操作的按钮。
GreenAsJade
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.