页面加载时的引导模式打开 [英] Bootstrap modal opening on page load

问题描述

我有一个带有引导模式的页面(手册:http://getbootstrap.com/javascript/#modals).

I got a page with a bootstrap modal on it (manual: http://getbootstrap.com/javascript/#modals).

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

I would like to have this modal open on page load. However this is not happening.

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

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

Now if I add a button to the code. The modal is opening when I press the button.

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

我尝试了几件事，但我无法让它在页面加载时自动打开模式.我在 html 头中调用了 bootstrap 的 js 和 css.

I tried several things, but I can't get it to work that the modal opens itself on page load. I have both the js and css of bootstrap called in the html head.

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

我做错了什么?

推荐答案

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

I found the problem. This code was placed in a separate file that was added with a php include() function. And this include was happening before the Bootstrap files were loaded. So the Bootstrap JS file was not loaded yet, causing this modal to not do anything.

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

With the above code sample is nothing wrong and works as intended when placed in the body part of a html page.

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

这篇关于页面加载时的引导模式打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！