Twitter bootstrap 页面加载时的引导模式打开

我得到了一个带有引导模式的页面（手册：）

我想在页面加载时打开此模式。然而，这并没有发生

<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>
      </div>
      <div class="modal-body">
        <p>However the account provided is not known.<BR>
        If you just got invited to the group, please wait for a day to have the database synchronized.</p>

        <p>You will now be shown the Demo site.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
<!--
$('#memberModal').modal('show');
//-->
</script>

&时代；
感谢您的登录！
但是，提供的帐户未知。

如果您刚被邀请加入该组，请等待一天以同步数据库

您现在将看到演示站点

接近

现在，如果我在代码中添加一个按钮。当我按下按钮时，模式正在打开

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#memberModal">
  Launch modal
</button>

发射模态

我尝试了几种方法，但我无法让它在页面加载时自动打开。 我在html头部调用了引导的js和css

<!-- Bootstrap - Latest compiled and minified CSS -->
<link rel="stylesheet" type='text/css' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Bootstrap - Latest compiled and minified JavaScript -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

我做错了什么？

在通话中使用

document.ready（）

事件

$(document).ready(function () {

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

});

JSFIDLE已更新-

我发现了问题。 这段代码放在一个单独的文件中，该文件是用一个php include（）函数添加的。 这是在加载引导文件之前发生的。因此，引导JS文件尚未加载，导致此模式无法执行任何操作

使用上面的代码示例并没有什么错误，当放置在html页面的主体部分时，它可以正常工作

<script type="text/javascript">
$('#memberModal').modal('show');
</script>

$（'memberModal'）.modal（'show'）；

现在在JSFIDLE上，一切似乎都可以正常工作。我真的不明白。这就是为什么您应该在通话中使用

document.ready（）

事件的原因。我喜欢这个答案。我正在使用MVC通过ajax动态创建一个模式，并需要在用户单击某个内容时将其显示在页面上。这就成功了！（我在模态主体中有一个局部视图，该视图返回一个动态局部视图，该视图取决于他们单击的内容-因此，静态模态在我的实例中不起作用）。此外，有时，我可以理解，如果您需要在页面最初加载时提醒用户某些事情（例如，同意条款、要求关闭广告阻止程序、通知维护窗口等）。我也做了同样的事情，最初在页面加载时，它会显示模式，但对于后续的页面刷新/重新加载，它不显示模态。过了一段时间，它又出现在两者之间。原因是什么？这应该是公认的答案