关于技术您现在的位置是:首页 > 关于技术

jQuery-Cookie实现不再提示功能

头像 2019-06-06 13:59:02 , 62 人已围观 0 条评论

简介

网页上经常见到当点击某些按钮时弹出一个提示框,但每次点击都弹出又感觉比较烦,所以提示框上一般有不再提醒选择项, […]

网页上经常见到当点击某些按钮时弹出一个提示框,但每次点击都弹出又感觉比较烦,所以提示框上一般有不再提醒选择项,勾选后再点击按钮,就不再提示了。

实现这个功能也很简单,主要是利用cookie存储一个状态,来记录我们是否勾选了不再提示的选框。在我们下次操作的时候根据cookie的存储状态来决定是否弹出提示框。

主要代码:

HTML

<div class="wrap">
  <ul class="list"></ul>
  <button class="add_btn" onclick="addNum();">添加</button>
</div>
<div class="wd_prompt">
  <div class="wd_top">提示</div>
  <div class="wd_content">
    <p>列表添加成功!</p>
    <div class="not_prompt">
      <input type="checkbox" id="isCancel">
      <span>不再提示</span>
    </div>
  </div>
  <div class="wd_bottom">
    <button class="ok_btn" onclick="closePrompt();">知道了</button>
  </div>
</div>
<div class="layer"></div>

JS

<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/cookie.js"></script>
<script type="text/javascript">
function addNum(){
  $(".list").append("<li>新添加的数字:"+ Math.random() +"</li>");
  if("true" == Cookies.get("notPrompt")){
    $(".wd_prompt").hide();
    $(".layer").hide();
  }else{
    $(".wd_prompt").show();
    $(".layer").show();
  }
}
function closePrompt(){
  var isCancel = $("#isCancel")[0].checked;
  Cookies.set("notPrompt", isCancel);
  $(".wd_prompt").hide();
  $(".layer").hide();
}
</script>

注意用cookie.js插件之前先引入jquery;另外想要cookie设置有效,必须在服务端展示。

代码的CSS样式,自己写就好,想看在线效果展示,狠戳这里吧。我们,加油!

相关推荐

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号