如何使用javascript隐藏引导模式？_Javascript_Jquery_Twitter Bootstrap_Modal Dialog

如何使用javascript隐藏引导模式？

javascript jquery twitter-bootstrap

如何使用javascript隐藏引导模式？,javascript,jquery,twitter-bootstrap,modal-dialog,Javascript,Jquery,Twitter Bootstrap,Modal Dialog,我已经阅读了这里的帖子，Bootstrap网站，并且疯狂地在谷歌上搜索——但是找不到我确信是一个简单的答案我有一个引导模式，我从一个链接到助手打开，如下所示： <%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %> 在浏览器窗口中打开模式

我已经阅读了这里的帖子，Bootstrap网站，并且疯狂地在谷歌上搜索——但是找不到我确信是一个简单的答案

我有一个引导模式，我从一个链接到助手打开，如下所示：

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

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

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

如果它起作用（并且模式关闭），那么您就知道关闭的Javascript没有正确地从服务器发送到浏览器

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

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

我遇到了我认为类似的问题。

$（'#myModal'）.modal（'hide'）

很可能正在运行该函数并达到了目标

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

问题在于，即使显示模式且值应为真，值isShown也可能未定义。我已将引导代码稍微修改为以下内容

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

这似乎在很大程度上解决了这个问题。如果背景仍然存在，您可以在隐藏调用

$（'.modal background'）.remove（）之后添加一个调用以手动删除它。一点也不理想，但确实有效。
我也遇到了同样的问题，经过一点实验，我找到了解决办法。在我的单击处理程序中，我需要阻止事件冒泡，如下所示：
$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

（参考bootstrap3），要隐藏模式，请使用：$（'#modal'）.modal（'hide'）
。但是背景挂在周围的原因（对我来说）是因为我在“隐藏”完成之前破坏了模态的DOM
为了解决这个问题，我将隐藏事件与DOM移除链接起来。在我的例子中：this.render（）

要关闭引导，您可以将'hide'作为选项传递给模态方法，如下所示
$('#modal').modal('hide');

请看《工作指南》
bootstrap还提供了可以挂接到功能中的事件，例如，如果您想在模式对用户隐藏完成后触发事件，您可以使用hidden.bs.modal事件您可以在中阅读更多关于模式方法和事件的信息
如果上述方法无效，请为关闭按钮提供一个id，并触发单击关闭按钮。
我最好在出现“显示”回调后进行调用：
$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

这确保了在进行hide（）调用之前加载模式。
我遇到了同样的错误，这行代码确实帮助了我
$("[data-dismiss=modal]").trigger({ type: "click" });

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

我使用bootstrap3.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
    });

这是文件：

方法如下：
$（'#myModal'）.modal（'hide'））
如果您需要多次打开包含不同内容的模式，我建议添加（在您的主js中）：
因此，您将在下一次打开时清理内容并避免某种缓存
我找到了正确的解决方案，您可以使用此代码
$('.close').click(); 

我意识到这是一个老问题，但我发现这些都不是我真正想要的。这似乎是由于试图在模态完成显示之前关闭模态造成的
我的解决方案是基于@schoonie23的答案，但我不得不改变一些事情
首先，我在脚本顶部声明了一个全局变量：
<script>
    var closeModal = false;
    ...Other Code...

然后是：（注意名称'show.bs.modal'，表示modal已完全显示，而不是在调用show事件时触发的'show'。（我最初只尝试了'show'，但不起作用。）
希望有一天这能节省一些额外的研究。我花了一点时间寻找解决方案，然后才想出这个办法。
用引导隐藏和显示模态的最佳形式
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

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

我们发现，在调用服务器代码和返回成功回调之间只有一点延迟。如果我们将对服务器的调用包装在$（“#myModal”）.on（'hidden.bs.modal'，函数（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>


引导示例
window.onload=function（）
{
setInterval（函数（）{
$（“#closemodal”）。单击（）；
}, 3000);
}
模态示例
开放模态
&时代；
模态头
模态中的一些文本
接近
即使我也有同样的问题。这对我帮助很大
$（“#modal”）.modal（'hide'）；
及其变体不适用于我，除非我在“取消”按钮上有data dismise=“modal”
作为属性。与您一样，我的需要是基于一些附加逻辑可能关闭/可能不关闭，因此单击带有data dismise=“modal”的链接
完全不行。我最终得到了一个带有data dismission=“modal”
的隐藏按钮，我可以通过编程从中调用单击处理程序，因此
<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

如果你在你的模态中使用close类，下面的方法会起作用。根据你的使用情况，如果有多个具有close类的模态，我通常建议只过滤可见模态
$('.close:visible').click();

我用了这个密码-
使用“淡出”隐藏具有平滑效果的模态
$('#myModal').fadeOut();

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

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

我使用了以下简单代码：
$("#MyModal .close").click();

这可以在HTML中完成：
data-dismiss="modal"

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

data disclose=“model”
拯救
document.getElem
$('#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

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

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

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

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

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

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

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

data-dismiss="modal"

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

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

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