如何隐藏引导模式使用javascript？(How to hide Bootstrap modal

我在这里读帖，引导网站，谷歌搜索疯狂 - 但无法找到我敢肯定，是一个简单的答案...

我有一个引导模式，我从一个的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 ，我有一些错误处理代码（红宝石和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:

关闭引导模式 ，您可以通过“隐藏”选项，如模态方法如下

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

请看看工作小提琴这里

引导还提供了可以挂接到事件模式一样，如果你想火的时候，模态已完成被隐藏一个事件从用户就可以使用hidden.bs.modal事件的功能，你可以阅读更多有关模式的方法和事件在这里文档

如果上述方法工作的非，给一个id来关闭按钮，并引发点击关闭按钮。

Answer 3:

我用引导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:

(Referring to Bootstrap 3), To hide the modal use: $('#modal').modal('hide'). But the reason the backdrop hung around (for me) was because I was destroying the DOM for the modal before 'hide' finished.

To resolve this, I chained the hidden event with the DOM removal. In my case: 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

问题是，即使显示模态值被示不定，价值应该是真实的。 我稍微修改了引导代码以下

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

这似乎解决大部分的问题。 如果背景下仍然你总是可以添加一个调用隐藏通话后手动删除它$('.modal-backdrop').remove(); 。 不理想不惜一切，但没有工作。

Answer 10:

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

$('#myModal').on('shown', function () {
      $('#myModal').modal('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:

我遇到同样的问题，有点实验后，我找到了解决办法。 在我的点击处理程序中，我需要冒泡，像这样停止事件：

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

Answer 13:

这里是DOC： http://getbootstrap.com/javascript/#modals-methods

下面是方法：$（ '＃myModal'）模态（ '隐藏'）。

如果您需要打开几次不同内容的模态，我建议增加（在你主JS）：

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

所以，你会清理下一个开放的内容和避免类型的缓存

Answer 14:

我们需要照顾的事件冒泡。 需要添加一行代码

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

Answer 15:

我意识到这是一个老问题，但我发现，这些都不是真的是我一直在寻找准确。 这似乎是尝试之前，它的完成显示关闭模式造成的。

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

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

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

然后在我的模式代码：

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

然后这样的：（注意这表明模态已经完全显示而不是“秀”时被调用Show事件触发名“shown.bs.modal”（我最初试图只是“显示”，但没有奏效。 ）

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

希望这样可以节省别人的额外的研究有一天。 我花了位寻找一个解决方案之前，我想出了这个。

Answer 16:

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

Answer 17:

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

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

Answer 18:

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

这是不好的做法，但你可以使用这种技术通过在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>

Answer 20:

我用这个代码 -

隐藏使用淡出流畅的效果模式。

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

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

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

Answer 21:

如果你使用你的情态动词的密切类，下面的工作。 根据您的使用情况下，我一般推荐过滤以只可见模式，如果有一个以上的情态动词与接近类。

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

Answer 22:

我用这个简单的代码：

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

文章来源: How to hide Bootstrap modal with javascript?