当用户关闭<div>时,在所有网站页面上隐藏<div>

Question

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

用户可以分别关闭每个盒子:

$(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

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

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

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

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

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

Answer 1

使用localStorage().

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

• 点击DIV关闭后,您可以获得当前的时间戳
• 在该时间戳上添加小时数(24)
• 将该值存储localStorage为localStorage.setItem('desiredTime', time)
• 查询当前时间戳与存储时间戳localStorage.getItem('desiredTime'),基于该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浏览器.

网络存储HTML5

希望这可以帮助.

Answer 2

关于@Loading ..回答:

警报框在重新加载之前总是重新出现,然后消失.有任何想法吗？

为什么是这样？

内部函数$(document).ready()将执行,直到加载整个DOM.这就是呈现警报的原因,然后一旦函数运行,它就会隐藏它们.

解:

您最初可以使用类隐藏警报,以便利用浏览器在构建CSSOM之前不会呈现内容.

我们使用的类只是设置属性display: none;.

.hidden {
  display: none;
}

这当然会导致浏览器重绘.(见注释)

您的逻辑已经显示警报

    if (localStorage.getItem('desiredTime') >= currentTime) {
      $('#alert-box-news').hide();
    } else {
      $('#alert-box-news').show();
    }

因为使用.show()将添加内联样式display: block;,它将具有比.hidden类更高的特异性,显示警报.

的jsfiddle

笔记:

• 使用display: none;将向上或向下推送警报下方的内容.如果您愿意,可以使用其他方法,visibility: hidden;或者transform不在本答案的范围内.

编辑:

下面将举例说明执行以下步骤:

• 演示计数器增加到20秒进行测试.
• 我们点击以关闭警报并触发localStorage功能,设置desiredTime密钥.
• 设置密钥后,我们刷新浏览器并多次运行以查看密钥是否正常工作.

• 最后,为了检查密钥确实已设置,我们转到:

  DevTools(F12) - >应用程序选项卡 - >本地存储 - > jsFiddle shell.

• 在倒计时结束后再次点击运行,再次显示警报.

插图:

如果不能正常工作,我们可能需要更多细节来解决这种方法的问题.

Answer 3

据我理解你的问题,隐藏警报24小时(和随后向他们展示所有再一天后)将是一个不好的用户体验.

我假设您从某种数据库加载这些警报.如果是这样,正确的答案是在那里存储状态.无论是status列还是deleted_at时间戳,实现都是无穷无尽的.

无论哪种方式,我都会在数据库中存储警报状态,并在相应拉动时过滤您的数据.

因此在你的视图中你会有(假设这里的PHP):

<?php

<?php if(!empty($newlyFilteredAlerts)): ?>
    <article class="alert-box" id="alert-box-news">
        <h1>News Alerts</h1>
        <?php foreach(newlyFilteredAlerts as $alert): ?>
            <p><?= $alert ?></p>
        <?php endforeach;?
        <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>
<?php endif; ?>

那么你会因此想要添加某种端点来改变那个数据库状态:

$(document).ready(function() {
    $("#close-alert-box-news").click(function() {
        $.post({
            url: '/alerts',
            type: 'DELETE',
            success: function () {
                $("#alert-box-news").hide(800);                    
            },
        });
    });
});

注意:此答案旨在指向正确的方向,而不是编写代码.以上所有代码都是完全未经测试的,因此如果您只是复制并粘贴它可能无法正常工作.