引导模态不显示 [英] Bootstrap modal not displaying

问题描述

我已经从twitter bootstrap复制并粘贴了示例代码，以在Rails 3.2应用中创建一个基本的模态窗口:

I've copied and pasted the example code from twitter bootstrap to create a basic modal window in my Rails 3.2 app:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a href= "#myModal"  role="button" class="btn" data-toggle="modal">Launch demo modal</a>

它不起作用.这不是因为jQuery或脚本未加载，是因为a)它不需要加载任何js，因为它使用了数据定位功能； b)我检查了控制台，一切运行正常.

It's not working. It's not because of jQuery or scripts not loading because a) it doesn't need to load any js because its using data targeting and b) I've checked the console and everything is firing perfectly.

这也不是因为我同时包含了boostrap.js和bootstrap-modal.js ...我已经检查了，但是我没有.

It's also not because I'm including both boostrap.js and bootstrap-modal.js...I've checked and I'm not.

我很茫然.它应该工作.其他bootstrap js在网站上运行正常.

I'm at a loss. It should just work. Other bootstrap js is working fine on the site.

我唯一能想到的是与.hide和.fade类的定义有关–当我将它们取出时，模态会很好显示.当我包含它们时，它根本不会显示.

The only thing I can think of is it's something to do with the definition of the classes .hide and .fade - when I take them out, the modal shows up fine. When I include them, it won't show up at all.

jQuery UI会干扰它吗?

Could jQuery UI be interfering with it?

请询问我可能需要帮助的任何其他信息...

Please ask me for any further info you might need to help me...

更新:

所以我认为我看到了问题，但是我不知道如何解决.当我检查控制台时，在顶部，我会看到

So I think I see the problem, but I don't know how to fix it. When I check the console, right at the top I see that

element.style {
display: none;
}

现在已成为div的一部分，因此在控制台中看起来像这样:

is somehow now part of the div, so in the console it looks like this:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" >

但是我不知道为什么要添加它，或者从何处添加它.我该如何追踪呢?

But I don't know why it is adding it in, or where from. How can I track this down?

谢谢

推荐答案

我找到了原因.

只是为了对遇到此问题的任何人提供一些一般性的帮助.如果您无法找出问题所在，请尝试对应用程序中任何样式表中的模态"，淡入"，淡入"和隐藏"的任何类进行全部搜索".

Just to give it some general usefulness to anyone coming to this question. If you can't figure out what's wrong, try doing a 'search all' for any classes of 'modal' 'fade' 'fade in' and 'hide' in any style sheets in your application.

我在随机的CSS文件中定义了一个'fade'实例，这就是它在覆盖引导程序时停止显示的原因.删除参考后，一切正常.

I had a single instance of 'fade' being defined in a random css file, and that's what was stopping it displaying as it was overriding bootstrap. Once I deleted the reference, everything was ok.

这篇关于引导模态不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！