Question

我在rails

中使用bootstrap的模态插件

该网站说我可以在不写javascript的情况下获得该功能。

我在 HTML 中添加以下行（显瘦）：

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

我不在哪里

有人可以告诉我如何解决它吗？

Answer 1

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

bootstrap.js 包括 bootstrap-modal.js 。

解决方案：从head删除 bootstrap-modal.js ，它将正常运行。

Answer 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和样式表的引用是正确的。因此，只定义模态窗口的切换一次。

Answer 3

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

您可以选择以自己的方式解决此问题。我的方法，因为我没有真正使用淡入淡出的jquery手机我评论了它和Voila！模态对话框又回来了。希望这有助于某人。：）

Answer 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>

Answer 5

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

Answer 6

我有这个问题，因为我有两个引用“bootstrap.min.js”，一个CDN链接和其他本地文件，对其中一个做出评论使得一些下拉菜单没有响应

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

Answer 7

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

Answer 8

我有同样的问题，我被包括bootstrap.js和bootstrap.min.js，然后我删除了其中一个，它解决了问题

Answer 9

bootstrap.min.js导致此问题，删除它解决了问题，万一它还没有工作

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

这将有助于

Answer 10

在我的情况下，modals在属性方面运行良好，但是当从js调用.modal（＆＃39; show＆＃39;）时，它立即隐藏起来。当我将bootstrap.js放在页脚中时，问题就解决了，但是我不知道为什么在所有css和jquery声明之后它没有在头文件中工作。

Answer 11

我有同样的问题，在页面加载时，基于会话变量，我显示模态，它消失了，当我使用$（'＃myModal'）。modal（'show'），我的问题得到了在我使用的登录链接

上使用jquery Trigger方法解决

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

Answer 12

在我的案例中，我使用的是wordpress插件＆＃34; wp-jubhunt＆＃34;和＆＃34; _tk＆＃34;主题和两个都加载bootstrap.js所以在插件中禁用bootstrap.js为我工作。

Answer 13

在我的情况下，我有一个调用模态的按钮......

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

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

Answer 14

您只需从按钮或锚标记中删除data-toggle="modal"和data-target="#myModalID"属性即可。这会切换模态并导入bootstrap.min. js 两次或更多次，这会切换它！

相反，为按钮编写 onClick 事件侦听器并手动触发模式：$('#myModal').modal();

Answer 15

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

Answer 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)

bootstrap模态在显示后立即消失

16 个答案: