页面打开时让模态加载

Question

有人可以帮我吗，我试图在页面加载时加载一种模式，但是有一些严重的问题。

<script>
   $('#overlay').modal('show');

setTimeout(function() {
    $('#overlay').modal('hide');
}, 5000);
</script>

</head>

<body>


<div class="modal fade" id="overlay">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Context here</p>
      </div>
    </div>
  </div>
</div>

Answer 1

您必须将调用包装在文档中，以确保在页面完全加载后将被调用，如下所示：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $('#overlay').modal('show'); setTimeout(function() { $('#overlay').modal('hide'); }, 5000); }); </script> <body> <div class="modal fade" id="overlay"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>Context here</p> </div> </div> </div> </div> </body>

Answer 2

两个问题：

一个..您不必等到DOM完全加载。 使用$( document ).ready()实现在加载DOM之后加载脚本。

二：最佳做法是将代码放在实际的DOM元素之后，而不是放在它之后。 这样，可以确保在脚本运行之前“几乎”加载了DOM 。

IE浏览器：

<div class="modal fade" id="overlay">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Context here</p>
      </div>
    </div>
  </div>
</div>



   <script>
     $(document).ready(function() {
       $('#overlay').modal('show');
       setTimeout(function() {
       $('#overlay').modal('hide');
       }, 5000);
     });
  </script>

编辑我将使用.show()和.show() .hide()

   <script>
     $(document).ready(function() {
       $('#overlay').show();
       setTimeout(function() {
       $('#overlay').hide();
       }, 5000);
     });
  </script>

页面打开时让模态加载

问题描述

2 个解决方案

解决方案1
1 2017-06-08 18:31:38

解决方案2
1 2017-06-08 18:34:31

页面打开时让模态加载

问题描述

2 个解决方案

解决方案1 1 2017-06-08 18:31:38

解决方案2 1 2017-06-08 18:34:31

解决方案1
1 2017-06-08 18:31:38

解决方案2
1 2017-06-08 18:34:31