2017-07-31 36 views
-2

我在页面上使用javascript来显示一次页面已加载的模式,但是,在刷新时,我希望这种模式不会被重复,因为它可以有点麻烦。使用sessionstorage函数在每个会话中显示一个模式

我已经做了一些研究,并找到一种使用'sessionstorage'的方法,但问题是我不知道如何将它合并到我的代码中。我的java很穷。

以下是我的模态html和Javascript代码的摘录。

<div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <p class="text-left-side"> 
        <b>Check out your order now </b><br><br>                   
       </p> 
      </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal"><b>Close<b></button> 
     </div> 
    </div> 
</div> 

<!-- sCRIPT FOR THE PAGE LOAD MODAL --> 
    <script type="text/javascript"> 
     $(window).load(function(){  
     setTimeout(function(){ $('#myModal').modal('show'); }, 1400); 
     }); 
    </script> 
+1

而Java不是JavaScript。 –

回答

1

一些失误。

  1. 使用$(document).ready()函数。使用localStorage并设置一个标志。如果已设置,请勿显示模式。仅在未设置时显示。

片段

$(function() { 
 
    if (typeof Storage != "undefined") { 
 
    if (!localStorage.getItem("done")) { 
 
     setTimeout(function() { 
 
     $('#myModal').modal('show'); 
 
     }, 1400); 
 
    } 
 
    localStorage.setItem("done", true); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <p class="text-left-side"> 
 
      <b>Check out your order now </b><br><br> 
 
     </p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal"><b>Close<b></button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

上面的代码不会因为沙盒的片段执行。请检查您的代码。

您可以在JSBin查看工作演示。小心。它只能使用一次。 :D

相关问题