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

实现这个功能也很简单，主要是利用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样式，自己写就好，想看在线效果展示，狠戳这里吧。我们，加油！