当用户关闭< div>时，请隐藏< div>在所有网站页面上 [英] When a user closes a <div>, hide that <div> on all site pages

问题描述

我开发了一些显示在所有网站页面上的警告框。

I've developed a couple of alert boxes that display on all site pages.

用户可以关闭每个方框单独：

The user is able to close each box separately:

$(document).ready(function() {
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    $("#alert-box-maintenance").hide(800);
  });
});

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

现在我需要确保包装盒中的用户关闭（可能是一个，可能是两个），不会在他/她浏览网站时重新显示，或重新加载页面。

Now I need to make sure that the box the user closes (could be one, could be both), doesn't re-appear as he/she browses the site, or reloads a page.

我在想我可以将PHP cookie设置为24小时后到期。但是本网站上的大部分相关帖子都推荐使用JavaScript cookie。不幸的是，我实现JavaScript解决方案的努力没有奏效（关闭后框重新出现）。我已经尝试了各种方法，如下所述：

I'm thinking I could set a PHP cookie to expire in 24 hours. But most of the related posts on this site recommend a JavaScript cookie. Unfortunately, my efforts to implement a JavaScript solution haven't worked (the boxes re-appear after being closed). I've tried various methods, as outlined here:

• 设置cookie以在单击按钮时隐藏div


• 设置cookie时我的div被隐藏了


• jQuery Cookie hide / show div


• 隐藏div 24小时cookie javascript？

• Set cookie to hide div when button is clicked
• Set cookie when my div is hidden
• jQuery Cookie hide/show div
• Hide div 24hr cookie javascript?

在24小时内在整个网站上隐藏每个盒子的简单方法是什么？

What would be a simple method to hide each box, sitewide, for 24 hours?

我愿意接受jQuery，纯JavaScript，PHP，cookie，会话或其他。

I'm open to jQuery, plain JavaScript, PHP, cookies, sessions or something else.

推荐答案

使用 localStorage（）。

本地存储是按来源（每个域和协议）

• 点击DIV关闭后，您可以获得当前时间戳


• 添加小时数（24）那个时间戳


• 将该值存储在 localStorage 中，作为 localStorage.setItem（'desiredTime'，time）


• 使用存储的时间戳检查当前时间戳 localStorage.getItem（'desiredTime'） ，基于显示/隐藏

• On click of DIV close, you can get the current time-stamp
• Add number of hours (24) to that time-stamp
• Store that value in localStorage as localStorage.setItem('desiredTime', time)
• Check current time-stamp with that stored time-stamp localStorage.getItem('desiredTime'), based on that show/hide

jQuery

$(document).ready(function(){
        //Get current time
        var currentTime = new Date().getTime();
        //Add hours function
        Date.prototype.addHours = function(h) {    
           this.setTime(this.getTime() + (h*60*60*1000)); 
           return this;   
        }
        //Get time after 24 hours
        var after24 = new Date().addHours(10).getTime();
        //Hide div click
        $('.hide24').click(function(){
            //Hide div
            $(this).hide();
            //Set desired time till you want to hide that div
            localStorage.setItem('desiredTime', after24); 
        });
        //If desired time >= currentTime, based on that HIDE / SHOW
        if(localStorage.getItem('desiredTime') >= currentTime)
        {
            $('.hide24').hide();
        }
        else
        {
            $('.hide24').show();
        }
});

HTML

<div>DIV-1</div>
<div class='hide24'>DIV-2</div>

注意事项

• 您也可以使用 $ .cookie ，但现在这是一种较旧的方法。


• < div> ，类 hide24 将仅隐藏。


• 确保将此代码放在通用JavaScript中，该JavaScript会加载到您网站的每个HTTP请求上。


• 对于 localStorage ，您应该有HTML5浏览器。

• You can use $.cookie as well, but that's an older approach now.
• <div> with class hide24 will be hidden only.
• Make sure that you put this code in general JavaScript, which loads on every HTTP request of your website.
• For localStorage, you should have HTML5 browsers.

网络存储HTML5

希望这会有所帮助。

这篇关于当用户关闭&lt; div&gt;时，请隐藏&lt; div&gt;在所有网站页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！