页面加载时的引导模式打开 [重复]

Posted 2023-02-22

【中文标题】页面加载时的引导模式打开 [重复]

【英文标题】：Bootstrap modal opening on page load [duplicate]

【发布时间】：2015-03-20 00:36:55

【问题描述】：

我有一个带有引导模式的页面（手册：http://getbootstrap.com/javascript/#modals）。

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

<!-- 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 头中调用了 bootstrap 的 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>

我做错了什么？

【问题讨论】：

现在在 JSFiddle 上，这一切似乎都可以正常工作。 jsfiddle.net/uvnggL8w我真的不明白。

【参考方案1】：

在您的通话中使用document.ready() 事件。

$(document).ready(function () 

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

);

jsFiddle 更新 - http://jsfiddle.net/uvnggL8w/1/

【讨论】：

我喜欢这个答案。我正在使用 MVC 通过 ajax 动态创建模态，并且当用户单击某些内容时需要它出现在页面上。这成功了！ （我在模态的主体中有一个局部视图，它返回一个动态的局部视图，该视图取决于他们单击的内容——因此为什么静态模态在我的实例中不起作用）。此外，有时，我可以理解您是否需要在页面最初加载时提醒用户某些事情（例如同意条款、要求关闭广告拦截器、通知维护窗口等...）

我也做过同样的事情，最初在页面加载时显示模态，但是对于下一个后续页面刷新/重新加载，它不显示模态。一段时间后，它再次显示在两者之间。可能是什么原因？

这应该是公认的答案

【参考方案2】：

我发现了问题。 此代码被放置在一个单独的文件中，该文件添加了一个 php include() 函数。 而这个包含是在加载引导文件之前发生的。所以Bootstrap JS文件还没有加载，导致这个modal什么都不做。

上面的代码示例没有任何问题，并且在放置在 html 页面的正文部分时可以按预期工作。

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

【讨论】：

这就是为什么您应该在通话中使用document.ready() 事件。