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>

我认为它应该是正确的语法和所有内容，但是我不明白为什么按钮会打开它，但是页面加载和文档准备就绪？

更新：

我的包含

  <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

即使您使用错误的ID（大写M），您的代码也可以正常工作。

查看您的代码工作正常（chrome）... https://jsfiddle.net/joshmoto/njd7vuLx/

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

您的代码...

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

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

Answer 3

存在拼写错误

其“＃my_modal”而非“ #my_Modal”

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

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: