引导模式隐藏不起作用

Posted 2023-05-08

【中文标题】引导模式隐藏不起作用

【英文标题】：Bootstrap modal hide is not working

【发布时间】：2014-07-03 20:56:49

【问题描述】：

。 警报会在其他情况下出现。但我的模态没有隐藏 添加了 bootply。我的问题是一样的。

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</div>



<script type="text/javascript">
$("#buy").click(function () 
   var a = 4;
   if (a == 5) 
     alert("if");
     $('#myModal').modal('show');
   
   else 
    alert("else");
    $('#myModal').modal('hide');
   

);
</script>

bootply

【问题讨论】：

检查控制台是否有任何错误。如果有，请在此处发布。

你在alert()之后忘记了;

.. 你的 javascript 就在 html 中

你的<script>标签在哪里？

我检查了你的代码。现在您比较 a == 5。但 a 始终为 4。您可能必须检查为什么要进行此比较。如果要从 javascript 打开模式，还需要删除数据目标： 查看并确认 data-target 直接打开modal。检查这是否有效。

【参考方案1】：

您正在使用两种模式切换方法：通过 Javascript 和通过数据属性。因此，您的点击会触发模式显示作为您的数据属性集，并且您的 Javascript 不会影响此触发器。

只需删除数据属性并使用Javascript方法：

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () 
    var a = 4;
    if (a == 5) 
        alert("if");
        $('#myModal').modal('show');
     else 
        alert("else");
        $('#myModal').modal('hide');
    
);
</script>

【讨论】：

我现在有一个问题，可能是由于这个原因。我无法在我的本地开发环境中检测到它，但我们收到一些报告说我们的模式没有关闭并且字段被擦除。您对导致这种冲突的情况有任何想法吗？我们确实有 javascript 和指示模式关闭的数据属性，但这只是某些人的机器上的问题。它是特定版本的，我不知道，bootstrap 或 jquery 与特定版本的 Chrome 结合你有什么？

@Femtosecond 如果不阅读您的代码或至少具有精确的再现条件，很难知道发生了什么，您应该问自己的问题。

仅供参考，这个答案帮助我找到了我的问题，这是在我的 类中我使用的 class="modal" 而不是 class="modal-bootstrap"。我改为 class="modal-bootstrap" 并解决了我的问题。

我认为这是我的问题，但仍然不确定如何恢复在单击模式外部时关闭模式的能力。从 blur() 事件中执行此操作似乎对我没有用。

【参考方案2】：

我有同样的问题。删除fade 类。

【讨论】：

我认为这个类在js“隐藏”命令上有一个时间延迟。

哇，真的有效！谢谢你，你是救命稻草

这个答案应该更多。删除淡入淡出立即解决了问题。

问题在于'fade'类。但是你不需要删除它。执行以下操作 else $("#myModal").on('shown.bs.modal', function () $('#myModal').modal('hide');

【参考方案3】：

我遇到了同样的问题，尝试了很多东西，但唯一对我有用的解决方案是 @Tang Chanrith 建议单独删除模态的部分，但稍微改进一下以放回和滚动条。如果接受的答案对他们不起作用，我会提出我的答案。对不起我的英语不好。希望我能帮上忙。

@Tang Chanrith

试试这个功能

function hideModal() 
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $("#myModal").hide();

改进的解决方案

您只需从生成的 body 和 css 中删除一个类

function hideModal() 
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $("#myModal").hide();

【讨论】：

这会阻止它再次打开，直到刷新页面

【参考方案4】：

对于那些仍然有问题的人（嗨 Google 员工！），如果您使用淡入淡出，则必须使用 javascript 删除淡入淡出类。

【讨论】：

跟我的问题一模一样。

这个答案应该更多。删除淡入淡出立即解决了问题。上面还有一条评论也有同样的答案。

【参考方案5】：

试试这个功能

function hideModal()
    $("#myModal").removeClass("in");
    $(".modal-backdrop").remove();
    $("#myModal").hide();

【讨论】：

我似乎通过使用 $(",modal-backdrop").remove() 创建了一个新问题...我的滚动条也消失了！需要寻找其他解决方案。

【参考方案6】：

去掉模态类“fade”就行了。

【讨论】：

简短的回答最好对问题发表评论

【参考方案7】：

尝试像这样添加 return false：

$("#buy").click(function ()  
  var a = 4;
  if (a == 5) 
    alert("if");
    $('#myModal').modal('show');
  
  else 
    alert("else");
    $('#myModal').modal('hide');
  
  return false;
);

【讨论】：

它对我有用，但为什么它有效？我的意思是它解决了什么问题？

【参考方案8】：

我已经解决了这个问题。

$('#landingpage, body').on('click',function()
    $( ".action-close" ).trigger( "click" ););

【参考方案9】：

我检查了你的代码。 现在您比较 a == 5。但 a 始终为 4。您可能必须检查为什么要进行此比较。 如果要从 javascript 打开模式，还需要删除数据目标：

<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>

data-target 直接打开modal。 检查这是否有效。

【参考方案10】：

你应该试试这个$('.modal.in').modal('hide')

通过https://github.com/twbs/bootstrap/issues/489

【参考方案11】：

我有同样的问题，我的错误是我试图打开模态窗口几次。在尝试打开模式窗口之前，我们必须测试它是否尚未打开。

    if (!($("#MyModal").data('bs.modal') || )._isShown) 
        $("#MyModal").modal('show');
    

【参考方案12】：

使用引导程序隐藏模式对话框

方法一：使用引导

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

方法2：使用停止传播

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

方法3：显示方法调用后

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

方法 4：使用 CSS

this.display='block'; //Set block css
this.display='none'; //set none css after close dialog

【参考方案13】：

在java脚本代码中需要添加一行代码

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

【参考方案14】：

正如我所遇到的，有时您需要删除显示样式：

style="display: block;"

【参考方案15】：

我有同样的问题。我尝试了帖子中建议的 JavaScript 方式，不幸的是它只工作了一半。如果我多次触发我的模态，它就会出错。结果，我创建了一个使用 CSS 的解决方法：

/* Hide the back drop*/
.modal-backdrop.show 
    display: none;

/* Simulate the backdrop using background color */
.modal-open .modal 
    background-color: rgba(47, 117, 19, 0.3);

【参考方案16】：

当我使用与该链接绑定的 data-toggle="modal" 属性单击 link 并尝试使用 javascript 关闭它时，我正在打开模式弹出窗口，但我每次都失败了，所以当我从该链接中删除“data-toggle”属性和“href”并使用javascript打开它时，它也可以使用javascript正确关闭。

从下面几行代码，你可以很容易理解

<a href="#CustomerAdvancedModal" data-toggle="modal" class="classShowAdvancedSearch">Advanced Search</a>

我把上面的链接改成了这个链接的东西

 <a href="#" class="ebiz-Advanced-Search classShowAdvancedSearch">Advanced Search</a>

之后，当我尝试使用 javascript 关闭它时，我就成功了

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

【参考方案17】：

我也遇到了同样的问题，找不到正确的解决方案。

后来我观察到当模态运行良好时关闭时会发生什么。

三个主要属性是，

modal-open 类从 <body> 标记中删除。 在<body>标签更改CSS。 modal-backdrop 的 <div> 类被删除。

所以，当你手动做这些事情时，你会实现它，当不工作时。

Jquery中的代码应该如下，

      $('body').removeClass('modal-open');        
      $('body').css('padding-right', '');
      $(".modal-backdrop").remove();
      $('#myModal').hide();

因此，试试这个并获得解决方案。

【参考方案18】：

在打开加载模式之前，请确保关闭所有其他模式。 这是用于关闭模态的函数：

function hideLoadingModal() 
    $('#loadingModal').on('shown.bs.modal', function () 
        $('#loadingModal').modal('hide');      
    ); 

现在，如果我想打开模式，我调用上面的函数，然后打开一个新的。 像这样：

hideLoadingModal();
$('#loadingModal').modal('show');

希望对你有所帮助。

干杯

【参考方案19】：

一个可能的原因应该是 jquery 和 bootstrap 的顺序，而您的脚本顺序不正确。 下面应该是顺序。

1. <script src='js/jquery-3.2.1.min.js'></script>
2. <script src='js/bootstrap.min.js'></script>
3. your own script:
<script type="text/javascript">
$("#buy").click(function () 
   var a = 4;
   if (a == 5) 
     alert("if");
     $('#myModal').modal('show');
   
   else 
    alert("else");
    $('#myModal').modal('hide');
   

);
</script>

【参考方案20】：

检查是否关闭了主模式 div 内的所有嵌套 div

<div data-backdrop="static" class="modal fade" id="modal-progress" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

-----NESTED DIV ------------------

</div>

【参考方案21】：

以上解决方案都不适合我。如果是这种情况，请尝试在关闭按钮（动态添加的按钮）上模仿 click 事件：

<div class="modal" tabindex="-1" role="dialog" id="modal" area-hidden="true" style="display: inline-block;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            ...
        </div>
    <a href="#close-modal" rel="modal:close" class="close-modal ">Close</a></div>
</div>

$('.close-modal').click() 应该可以解决问题。

【参考方案22】：

试试这个

给一个id来关闭按钮

<button type="submit" id="modalcloseBtn" class="button primary" data-dismiss="modal" >Close</button>

并触发onclick事件

$('#modalcloseBtn').trigger("click");