关于技术您现在的位置是:首页 > 关于技术
jQuery-Cookie实现不再提示功能
2019-06-06 13:59:02 【Cookie, jQuery】 1493 人已围观 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样式,自己写就好,想看在线效果展示,狠戳这里吧。我们,加油!
上一篇: 模拟QQ邮箱多收件人输入功能
下一篇: JS判断全半角字符并实现互相转化