5

我在 Rails 应用程序中使用引导程序。我尝试使用引导模式显示对话框，但对话框不适合我。这是我的视图代码。

<div id="creative_attachment_popup" class="modal hide fade" role="dialog">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>Do you eant to continue../p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

简单地说，我将 js 文件称为

 $('#creative_attachment_popup').modal('show');

上面的代码只显示了一个淡入淡出的页面并且不包含任何对话框。当我在控制台中键入上面的 js 行时，它显示以下内容：

<div id=​"creative_attachment_popup" class=​"modal hide fade in ui-dialog-content ui-widget-content" role=​"dialog"> <h1 style=​"display:​ block;​" aria-hidden=​"false">​…​&lt;/div>​

用我的html参考上面的代码。为什么我会得到这个？

4

2 回答 2

5

您必须先包含 jQuery.js，然后再包含 bootstrap.js！

并且不要对脚本使用简化的 html 形式。（像<script src=""/>）你必须像这样关闭它<script src=""></script>）

<!-- JQuery -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<!-- BootStrap Link -->
<link rel="stylesheet" type="text/css" href="/linker/styles/vendor/bootstrap.css">
<script type="text/javascript" src="/linker/js/vendor/bootstrap.js"></script>

$('#creative_attachment_popup').modal('show');文件准备好后你打电话了吗？

$(function() {
    $('#creative_attachment_popup').modal('show');
});
于 2013-09-03T01:50:43.377 回答
0

检查以下内容：

  • 你是否包含了 jQuery.js？
  • 您是否包含 bootstrap.js？（您必须在引导之前包含 jQuery）
  • 您是否包含 bootstrap.css？
  • 转到浏览器的 Javascript 控制台（Firebug/Chrome 开发工具），确保没有任何错误。

我将您的代码复制并粘贴到空白页中，然后添加了以下标题：

<link href="bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap.js" type="text/javascript"></script>

然后我跑了

$('#creative_attachment_popup').modal('show');

奖牌弹出所有内容。所以我猜你可能没有包含所有内容（或包含错误的内容）。

于 2013-05-24T08:25:29.727 回答