Twitter-Bootstrap 模式无法正常工作答案

【问题标题】：Twitter-Bootstrap Modal not working ProperlyTwitter-Bootstrap 模式无法正常工作
【发布时间】：2013-02-16 23:40:44
【问题描述】：

我创建了一个模态对话

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

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

我刚刚从..调用了模态。

$("a#LaunchDemo").click();

但是屏幕上的模态只是blinking，我也通过按钮单击调用了模态。我遇到了同样的问题，我哪里出错了？，请帮助..

【问题讨论】：

$('#myModal').modal('show');它奏效了
确保在结束正文标记之前的页面底部加载 Bootstrap.js。如果你这样做了，你就不需要写一行JS了。

标签： javascript jquery twitter-bootstrap modal-dialog

【解决方案1】：

您需要在 DOM 完全加载后执行您的 javascript 代码。并使用modal 而不是click

$(document).ready(function() {
   $('#LaunchDemo').modal(options)
});

演示：http://jsfiddle.net/MgcDU/1998/

【讨论】：

【解决方案2】：

模型的with过大时会出错。

你可以在bootstrap文件{width:900}中设置modal class的样式表时试试

它会发生......

【讨论】：

【解决方案3】：

尝试从模态 div 中删除 hide 类：
<div id="myModal" class="modal~~hide~~fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

【讨论】：

【解决方案4】：

删除超链接标记中的 href="#myModal"，因为它试图将您链接到页面的一部分。

此外，您不需要在选择器中指定元素类型。仅按 ID 搜索元素会更快。

【讨论】：

不正确。通过引导页面，您可以在 href 中定位 div。这是来自引导页面。无需编写 JavaScript 即可激活模式。在控制器元素（如按钮）上设置 data-toggle="modal" 以及 data-target="#foo" 或 href="#foo" 以针对特定模式进行切换。