如何在特定滑块图像上加载具有延迟的模态?

时间:2017-10-15 08:35:43

标签: javascript jquery html css

所以我能够让我的模态出现在第一张幻灯片上,问题是当第二张幻灯片出现时,我还想在模态出现之前有一段延迟。我将如何在javascript中执行此操作,以便在每个滑块上,我的模态显示延迟为2秒,之后当滑块返回时,它会返回默认值并再次重新启动延迟过程?

<style>
.myModal {
  z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 650px; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
   display: none;
   }
</style>




<div class="myModal">
    <h1>Slide 1</h1>
  </div>

 <script>
 $(document).ready(function() {
   $(".myModal").delay(2000).fadeIn(500);
 });
 </script>

1 个答案:

答案 0 :(得分:0)

每次开启新幻灯片时都必须重复这一点,以便您可以使用它:

df1 = df.resample('T').apply(custom_resampler)
print (df1)
                                                          fetched_data
2017-10-15 06:55:00  {'SMA111': 2809, 'SMA121_CT': 2809, 'SMA110_4L...

setInterval(yourFunction() }, 8000); 是使您的模态在您的条件下出现的功能。