首页 > 前端
网站如何添加cookie弹出功能窗口
来源:TP课堂 时间:2023-11-15 点击:675

支持手机端和电脑端:

<div class="site-tips">
  <div class="container_1200">
    <div class="text">
      This website stores cookies on your computer. These cookies are used to improve your website experience and
      provide
      more personalized services to you, both on this website and through other media. To find out more about the
      cookies
      we
      use, see our Privacy Policy.<br />
      We won't track your information when you visit our site. But in order to comply with your preferences, we'll have
      to
      use just one tiny cookie so that you're not asked to make this choice again.
    </div>
    <div class="btn_box">
      <div class="btn btn1">Accept</div>
      <div class="btn btn2">Decline</div>

    </div>
  </div>
</div>
<!--script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script-->
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
  $(function () {
    if ($.cookie("lxtx_sitetips_cookie") != '1') {
      $('.site-tips').show();
    }
  });
  $('.site-tips .btn').on('click', function () {
    $('.site-tips').hide();
    $(function () {
      $.cookie('lxtx_sitetips_cookie', '1', { expires: 1 });
    });
  });
</script>
<style>
  /* lxtx-tips */
  .site-tips,
  .site-notice {
    position: fixed;
    z-index: 999;
    display: none;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
    background: #fff;
    color: #999;
    border-radius: 3px 0 0 0;
    padding: 25px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  }

  .site-tips .text {
    line-height: 26px;
  }

  .site-tips .btn_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .site-tips .btn_box .btn {
    border-radius: 20px;
    width: 90px;
    height: 38px;
    margin: 0 10px;
    background: #aaa;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    cursor: pointer;
  }

  .site-tips .btn_box .btn:hover {
    background: #999;
  }
</style>