在所有网站页面上隐藏元素 [英] Hiding an element on all site pages

问题描述

我开发了几个显示在所有网站页面上的警告框.

用户可以分别关闭每个框:

$(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 {宽度:50vw；位置:相对；边距:20px 自动；边框:1px纯黑色；}.alert-box-close {位置:绝对；顶部:-12px；右:-12px；光标:指针；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"><article class="alert-box" id="alert-box-news"><h1>新闻快讯</h1><p>正文正文正文正文正文正文正文正文正文正文正文正文正文</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 class="alert-box" id="alert-box-maintenance"><h1>网站维护</h1><p>正文正文正文正文正文正文正文正文正文正文正文正文正文</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>

jsFiddle

现在我需要确保用户关闭的框(可能是一个，也可能是两个)，不会在他/她浏览网站或重新加载页面时重新出现.

我想我可以将 PHP cookie 设置为在 24 小时内过期.但是本网站上的大多数相关帖子都推荐了 JavaScript cookie.不幸的是，我实现 JavaScript 解决方案的努力没有奏效(这些框在关闭后重新出现).我尝试了各种方法，如下所述:

• 设置 cookie 以在单击按钮时隐藏 div
• 当我的 div 隐藏时设置 cookie
• jQuery Cookie 隐藏/显示 div
• 隐藏 div 24 小时 cookie javascript?

在整个站点范围内隐藏每个框 24 小时的简单方法是什么?

我对 jQuery、纯 JavaScript、PHP、cookie、会话或其他东西持开放态度.

解决方案

使用localStorage().

本地存储按来源(按域和协议)

• 点击DIV关闭，可以获得当前时间戳
• 向该时间戳添加小时数 (24)
• 将该值存储在 localStorage 中作为 localStorage.setItem('desiredTime', time)
• 使用存储的时间戳检查当前时间戳 localStorage.getItem('desiredTime')，基于该 show/hide

jQuery

$(document).ready(function(){//获取当前时间var currentTime = new Date().getTime();//添加小时功能Date.prototype.addHours = function(h) {this.setTime(this.getTime() + (h*60*60*1000));返回这个；}//获取24小时后的时间var after24 = new Date().addHours(10).getTime();//隐藏div点击$('.hide24').click(function(){//隐藏div$(this).hide();//设置所需的时间，直到您想隐藏该divlocalStorage.setItem('desiredTime', after24);});//如果需要的时间>= currentTime，基于那个HIDE/SHOWif(localStorage.getItem('desiredTime') >= currentTime){$('.hide24').hide();}别的{$('.hide24').show();}});

HTML

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

注意事项

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

• 类为 hide24 将仅隐藏.
• 确保将此代码放在通用 JavaScript 中，该 JavaScript 会在您网站的每个 HTTP 请求上加载.
• 对于 localStorage，你应该有 HTML5 浏览器.

网络存储 HTML5

希望这会有所帮助.

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>

jsFiddle

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.

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:

• 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?

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

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

解决方案

Use localStorage().

Local storage is per origin (per domain and protocol)

• 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>

Things to note

• 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.

Web Storage HTML5

Hope this helps.

这篇关于在所有网站页面上隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！