每天/ ip显示一次整页div叠加

时间:2013-11-11 23:42:24

标签: javascript jquery html cookies

我需要每天一次显示“div overlay”一次...覆盖div显示5秒然后关闭。我只需要显示一次然后不显示。这是代码......

<script type="text/javascript">
   function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
    overlay.style.display = "none";
    specialBox.style.display = "none";
} else {
    overlay.style.display = "block";
    specialBox.style.display = "block";
}
    }
</script>

<script>
  function timerdiv()
   {
   setTimeout(function(){return toggleOverlay()},5000);
   }
</script>


<body Onload="toggleOverlay();timerdiv();">

<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">

 TEST Overlay BOX

</div>

 <!-- Start Special Centered Box -->
 <!-- Start Normal Page Content -->

<div id="wrapper">        

  Hello World!

</div>

 </body>

我有这个代码..我已经改变但是我无法正常运行..每次访问时都要显示叠加div

<script type="text/javascript"        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">                                         
    $(document).ready(function() {
        if( $.cookie('showOnlyOne') ){
            //it is still within the day
            //hide the div
            $('#overlay').hide();

        } else {
            //either cookie already expired, or user never visit the site
            //create the cookie
            $.cookie('showOnlyOne', 'showOnlyOne', { expires: 1 });

            //and display the div
            $('#overlay').show();

        }
    });
    </script>

编辑:

好的...之后用代码打了好几个小时。我找到了解决方案,在此处分享,以防将来有人提供服务。

<head>

<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
opacity: 0.8;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px; 
height: 300px;
background: #FFF;
color: #000;
 }
div#wrapper {
position:absolute;
top: 0px;
left: 20%;
padding-left:24px;
  }
     </style>


  <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">                                         
    $(document).ready(function() {
        if( $.cookie('showOnlyOne') ){
            //it is still within the day
            //hide the div
           $('#overlay').hide();
          $('#specialBox').hide();
        } else {
            //either cookie already expired, or user never visit the site
            //create the cookie
            $.cookie('showOnlyOne', 'showOnlyOne', { expires: 1 });

            //and display the div
          $('#overlay').show();
          $('#specialBox').show();
          $('#specialBox').delay(3200).fadeOut(300);
          $('#overlay').delay(3200).fadeOut(300);
        }
    });
    </script>



 </head>
 <body>

 <!-- Start Overlay -->
 <div id="overlay"></div>
 <!-- End Overlay -->
 <!-- Start Special Centered Box -->
 <div id="specialBox">

 TEST Overlay BOX

 </div>

 <!-- Start Special Centered Box -->
  <!-- Start Normal Page Content -->

 <div id="wrapper">        

 Hello World!

 </div>

 </body>

我自己的代码中的错误是同时对两个不同的脚本做了同样的事情..如果有“Milche Patern”会看到代码实现的速度比我快得多并且没有浪费时间坚持这个问题与我之前的问题相同或者说“每24小时一次=每天一次”。但总是我会找到喜欢浪费时间和浪费时间的人

0 个答案:

没有答案