Bootstrap 模态框不会在页面加载时打开

Question

我有一个模式，可以通过按钮成功打开：

<button onclick="content()" data-toggle="modal" data-target="#my_modal">Save</button>

<form action="addPage.php" method="post">
  <div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="savePageLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="savePageLabel">Page Details:</h5>
        </div>
      </div>
    </div>
  </div>
</form>

但我试图让它在页面加载时打开，但它不起作用:

<script type="text/javascript"> 
$(window).load(function(){
$('#my_Modal').modal('show');
}); 
</script>

我觉得它应该是正确的语法和一切，但我不明白为什么按钮会打开它但页面加载而 document.ready 不会？

更新时间：

我的包括

  <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
    <script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

Answer 1

您使用的ID有误。试试这个：

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

Answer 2

有一个拼写错误

是“#my_modal”而不是“#my_Modal”

 <script type="text/javascript"> 
    $(window).load(function(){
    $('#my_modal').modal('show');
    }); 
 </script>

Answer 3

即使 ID（大写字母 M）错误，您的代码也能正常工作。

查看您的代码是否有效（chrome）...https://jsfiddle.net/joshmoto/njd7vuLx/

您是否正确加载 bootstrap js 和查询？

您的代码...

$(window).load(function(){
    $('#my_Modal').modal('show');
});

使用您的原始代码为我工作的 jsfiddle 的屏幕截图。

Answer 4

试试这个....

$(window).on('load',function(){
        $('#my_modal').modal('show');
    });

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>

<button onclick="content()" data-toggle="modal" data-target="#my_modal">Save</button>

<form action="addPage.php" method="post">
  <div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="savePageLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="savePageLabel">Page Details:</h5>
        </div>
      </div>
    </div>
  </div>
</form>
But I'm trying to have it open on page load instead and it won't work:

Bootstrap 模态框不会在页面加载时打开

Bootstrap modal won't open on page load

javascript

jquery

pageload

bootstrap-4