引导模式不显示 [英] 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 文件中定义了一个淡入淡出"的实例，这就是阻止它显示的原因，因为它覆盖了引导程序.删除引用后，一切正常.

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