jQuery 引导模式显示后立即消失

bootstrap modal disappear immediately after showing

提问by HanXu

I'm using bootstrap's modal plugin in rails

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

The website says I can gain the function without write javascript.

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

I add the following line in my HTML(in slim):

我在我的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

However, after I clicking the Button. the modal shows up, but immediately disappears!

但是，在我单击Button. 模态出现，但立即消失！

I found the css of #makeDreamhas

我发现CSS的#makeDream有

display:none

I don't where it comes

我不知道它来自哪里

Can someone tell me how to fix it?

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

回答by Adam

I had this problem and the solution was simple... I was loading both bootstrap.jsAND bootstrap-modal.js.

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

bootstrap.jsincludes bootstrap-modal.js.

bootstrap.js包括bootstrap-modal.js。

Solution: Remove bootstrap-modal.jsfrom your headand it'll work correctly.

解决方案：从你的文件中删除bootstrap-modal.jshead，它会正常工作。

回答by HanXu

In my case the problem of showing and immediately disappearing modal window was that I called toggle twice. First, in tag in HTML file, and then when attaching event handler in JavaScript file, like so:

在我的情况下，显示和立即消失模态窗口的问题是我调用了两次切换。首先，在 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');
});

References to the Bootstrap CDN and stylesheets were correct. Therefore, define toggle of modal window only once.

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

回答by Nishant

If anybody is using twitter bootstrap modal on a mobile site, there is a big chance that you might be using jquerymobile. If so you will probably encounter this particular problem of bootstrap modal dissapearing on you. I found the problem was with a '.fadein' class from jquerymobile that was overriding the '.fadein' class from bootstrap causing the modal window to be hidden.

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

You can choose to fix this in your own way. My approach, since i wasn't really using fade in from jquery mobile I commented it out and Voila! the modal dialog was back. Hope this helps someone. :)

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

回答by Zheileman

Try to remove the "hide" class in this line:

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

div#makeDream.modal.hide.fade

To read as this:

阅读如下：

div#makeDream.modal.fade

Also note that depending on the Bootstrap version you're using, the button to open the modal could need to be written as (translate to html slim):

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

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

回答by saggy

you should add bootstrap-model.js at the bottom of webpage, a had it problem also, I was trying with another plugin, we can use another plugin too but before use it think of bootstrap-model.js.....

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

回答by WasiF

I had this issue because I had two references of "bootstrap.min.js", one CDN link and other local file, making comment to one of them made some dropdown menus unresponsive

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

then I just updated the "jQuery Validate Unobtrusive for Bootstrap 3", it resolved my issue.

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

回答by Shahid Chaudhary

In my Case i was using wordpress plugin "wp-jubhunt" and "_tk" theme and both was loading bootstrap.js so disabling bootstrap.js in plugin worked for me.

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

回答by Lovemore Daka

In my case, I had a button that was calling the modal...

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

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

I changed the button to an anchor tag and it works fine

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

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

This was after i checked that i was not loading duplicate bootstrap javascript files. Bootstrap.min.js or boostrap.js. Just one is enough.

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

回答by Simran Sawhney

You can simply remove the data-toggle="modal"and data-target="#myModalID"attributes from the button or anchor tag. This toggles the modal and you have imported bootstrap.min.js twice or more, which toggles it!

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

Instead, write an onClickevent listener for the button and manually trigger the modal: $('#myModal').modal();

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

回答by Adil Bashir

The other solutions here did not help me. I found I had used modal inside a blade form that is in laravel and that is the reason form action sends request for loop and my model disappears. I simply cut the button outside the form div and all works fine.

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