Question

我正在使用CSS和HTML创建一个模态，但是想要在使用jquery加载页面3秒后加载它。我很难找到合适的事件处理程序。这样做的最佳方式是什么？

下面的模式

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script>
</head>
<body>
  <span id="about" class="target"></span>
  <div class="modal">
    <div class="content" style="height: 425px;  width: 425px;">
      <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
      <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
      <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
      <a class="close-btn" href="#start">X</a>
      <button class="cart-button" style="width: 189px;height: 49px;"> 
        View Cart</button>
     </div>
 </div>
 <div class="page-container">
   <p><a href="#about">Open Modal Window</a>
 </div>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

Javascript

window.onload = () => {
    setTimeout(() => {
      console.log('time');
    }, 3000);

}

Answer 1

您可以使用解决方案https://jsfiddle.net/7pgrzp7d/

setTimeout(function(){
  $('.modal').modal({show:true});
}, 3000);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<span id="about" class="target"></span>
  <div class="modal">
    <div class="content" style="height: 425px;  width: 425px;">
      <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
      <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
      <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
      <a class="close-btn" href="#start">X</a>
      <button class="cart-button" style="width: 189px;height: 49px;"> 
        View Cart</button>
     </div>
 </div>
 <div class="page-container">
   <p><a href="#about">Open Modal Window</a>
 </div>

window.onload = () => {
  setTimeout(() => {
    $('.modal').modal({show:true});
  }, 3000);
}

希望这会对你有所帮助。

Answer 2

做了一些假设，我通过css隐藏了模态（内联就像你的代码一样），然后在3秒后显示出来：

https://jsfiddle.net/pv7j5qdt/

＆＃13;

$(document).ready(function() {
	setTimeout(function(){ 
  	$('.modal').show();
  }, 3000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="about" class="target"></span>
  <div class="modal" style="display: none;">
    <div class="content" style="height: 425px;  width: 425px;">
      <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
      <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
      <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
      <a class="close-btn" href="#start">X</a>
      <button class="cart-button" style="width: 189px;height: 49px;"> 
        View Cart</button>
     </div>
 </div>
 <div class="page-container">
   <p><a href="#about">Open Modal Window</a>
 </div>

＆＃13;

Answer 3

我添加了一个类hidden并将其添加到模态中。属性是display:none;。 3秒后，我只需使用show()：

删除它

＆＃13;

window.onload = () => {
    setTimeout(() => {
      $('div.modal').show();
    }, 3000);
}

＆＃13;

.hidden{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="about" class="target"></span>
  <div class="modal hidden">
    <div class="content" style="height: 425px;  width: 425px;">
      <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
      <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
      <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
      <a class="close-btn" href="#start">X</a>
      <button class="cart-button" style="width: 189px;height: 49px;"> 
        View Cart</button>
     </div>
 </div>
 <div class="page-container">
   <p><a href="#about">Open Modal Window</a>
 </div>

＆＃13;

如何在超时时打开此模式？

3 个答案: