引导模态显示后立即消失

Posted 2023-03-06

【中文标题】引导模态显示后立即消失

【英文标题】：bootstrap modal disappear immediately after showing

【发布时间】：2012-04-10 15:54:47

【问题描述】：

我在 rails 中使用 bootstrap 的模态插件

网站上说不用写javascript就可以得到这个功能。

我在我的 HTML 中添加以下行（in slim）：

div#makeDream.modal.hide.fade 
    div.modal-header
        a.close data-dismiss='modal'
        h3 Hello World!            
    div.modal-body
    div.modal-footer

a data-toggle='modal' data-target='#makeDream' Button

但是，在我点击Button 之后。模态出现，但立即消失！

我发现#makeDream的css有

display:none

我不知道它来自哪里

谁能告诉我怎么解决？

【问题讨论】：

您在标题中包含哪些脚本？

【参考方案1】：

我遇到了这个问题，解决方案很简单...我同时加载了 bootstrap.js 和 bootstrap-modal.js。

bootstrap.js 包括 bootstrap-modal.js。

解决方案：从您的head 中删除 bootstrap-modal.js，它会正常工作。

【讨论】：

发生在我身上的是我在 和

就我而言：我同时加载了 bootstrap.js 和 bootstrap.min.js。所以我只是删除了 bootstrap.js 并保留了缩小的 bootstrap javascript。它对我有用，非常感谢这个想法。

谢谢。也为我工作，它为我节省了数小时的头痛时间。

谢谢。有效！！ （我从application.js 中删除了//= require bootstrap/modal）

【参考方案2】：

在我的情况下，显示和立即消失模式窗口的问题是我调用了两次切换。首先，在 html 文件中的标记中，然后在 JavaScript 文件中附加事件处理程序时，如下所示：

<a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal" id="deleteItemButton">Delete Item</a>

$ultodoListDisplay.on( "click", "#deleteItemButton",  function()
    $('#myModal').modal('toggle');
);

对 Bootstrap CDN 和样式表的引用是正确的。 因此，只定义一次模态窗口的切换。

【参考方案3】：

如果有人在移动网站上使用 twitter 引导模式，那么您很有可能正在使用 jquerymobile。如果是这样，您可能会遇到引导模式消失的特殊问题。我发现问题出在 jquerymobile 的“.fadein”类上，它覆盖了引导程序中的“.fadein”类，导致模态窗口被隐藏。

您可以选择以自己的方式解决此问题。我的方法，因为我并没有真正使用 jquery mobile 的淡入，所以我把它注释掉了，瞧！模态对话框又回来了。希望这可以帮助某人。 :)

【参考方案4】：

尝试删除此行中的“隐藏”类：

div#makeDream.modal.hide.fade

这样读：

div#makeDream.modal.fade

另请注意，根据您使用的 Bootstrap 版本，打开模式的按钮可能需要编写为（转换为 html slim）：

<a class="btn" data-toggle="modal" data-backdrop="true" data-keyboard="true" href="#makeDream">Open Modal</a>

【讨论】：

通过将 data- 属性添加到我的 元素，它起作用了！我只有 boostrap.min.js 文件及其最新版本，我遇到了同样的问题。

【参考方案5】：

你应该在网页底部添加 bootstrap-model.js， 一个也有问题，我正在尝试使用另一个插件，我们也可以使用另一个插件，但在使用它之前考虑 bootstrap-model.js .....

【参考方案6】：

这里的其他解决方案对我没有帮助。我发现我在 laravel 中的刀片表单中使用了模态，这就是表单操作发送循环请求并且我的模型消失的原因。我只是剪掉了表单 div 外的按钮，一切正常。

【参考方案7】：

我遇到了这个问题，因为我有两个“bootstrap.min.js”引用，一个 CDN 链接和其他本地文件，对其中一个进行评论会使一些下拉菜单无响应

然后我刚刚更新了“jQuery Validate Unobtrusive for Bootstrap 3”，它解决了我的问题。

【参考方案8】：

我也遇到了同样的问题。我删除了淡入淡出类，它对我有用。

【参考方案9】：

bootstrap.min.js 会导致这个问题，删除它可以解决问题， 万一它仍然不起作用，请使用

jQuery(document).on('click','#SendMail',function() 
 jQuery("#fixerrormodal").modal('toggle');   
);

这会有所帮助

【参考方案10】：

在我的例子中，modals 可以很好地处理属性，但是当从 js 调用 .modal('show') 时，它会立即隐藏起来。当我将 bootstrap.js 放在页脚时问题解决了，但我不知道为什么在所有 css 和 jquery 声明之后它在页眉中不起作用。

【参考方案11】：

我遇到了同样的问题，在页面加载时，基于会话变量，我正在显示模态，当我使用 $('#myModal').modal('show') 时，它消失了，我的问题得到了通过使用jquery Trigger方法解决，在我使用的登录链接上

$(window).load(function() $('#loginlink').trigger('click'); );

【参考方案12】：

在我的案例中，我使用的是 wordpress 插件“wp-jubhunt”和“_tk”主题，并且两者都在加载 bootstrap.js，因此在插件中禁用 bootstrap.js 对我有用。

【参考方案13】：

我遇到了同样的问题，我同时包含了 bootstrap.js 和 bootstrap.min.js，然后我删除了其中一个并解决了问题

【参考方案14】：

就我而言，我有一个调用模态的按钮...

<asp:Button ID="btnSearch" runat="server" Width="100%" Text="Select
Action" class="btn btn-info btn-sm" data-backdrop="static"
data-toggle="modal" data-target="#myModalID"></asp:Button>

我把按钮改成了锚标签，效果很好

<a href="#" ID="btnShowModal" class="btn btn-info btn-sm"
data-backdrop="static" data-toggle="modal" style="width:100%;"
data-target="#myModalID">Select Action</a>

这是在我检查我没有加载重复的引导 javascript 文件之后。 Bootstrap.min.js 或 boostrap.js。一个就够了。

【讨论】：

总是尝试用示例和描述来回答。

【参考方案15】：

您可以简单地从按钮或锚标记中删除data-toggle="modal" 和data-target="#myModalID" 属性。这会切换模式，并且您已经导入了bootstrap.min.js 两次或更多，这会切换它！

改为为按钮编写一个onClick事件监听器并手动触发模态：$('#myModal').modal();

【参考方案16】：

我也遇到了同样的问题。我在布局页面中包含了正确的引导库。然后就解决了。 https://www.tutorialspoint.com/asp.net_mvc/asp.net_mvc_bootstrap.htm

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)