一次性弹出框(SweetAlert2)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一次性弹出框(SweetAlert2)相关的知识,希望对你有一定的参考价值。

我一直在使用一个名为SweetAlert2的新弹出框系统,该系统使用Java和CSS。它看起来对用户非常有吸引力,我想在我的网站上使用它是出于我正在努力实现的目的。我想创建一次性弹出框,一旦关闭,用户就不会再看到它了。我知道很多网站都使用cookies,但我不知道如何在我的脚本中实现这一点。我希望得到一些支持!

<script>
  swal({
    title: 'Website Maintenance Complete!',
    text: 'For full update log please click <a href="">here</a>',
    type: 'success',
    confirmButtonText: 'Nice!'
  }) 
</script>

上面是我用来在页面加载时出现弹出框的脚本,我只希望它出现一次。如果有人能指出我正确的方向或提供一个很好的解决方案。干杯!

答案

您可以使用cookie来检测回访者:

if (-1 === document.cookie.indexOf('returning=true')) {

  // run only if cookie not found (-1 means not found)

  swal( ... ); // alert
  document.cookie = 'returning=true'; // set cookie
}
另一答案

另一个选择是使用localStorage / sessionStorage,如果它只是客户端的东西。否则该cookie将被发送到所有其他请求。

if (!localStorage.returning) {
    // run only if returning not stored in localStorage

    swal( ... ); // alert
    localStorage.returning = true; // set returning
}
另一答案

Cookies不是你去的地方,比如@iownthegame建议,你应该使用服务器session对象。会话将持续到用户离开网站,因此我认为这是正确的方法。我不知道你的服务器语言是什么,所以我会写一个伪语:

  user login to site
  swal( ... ); // alert will popup
  when the user first login, if(session("visited")!=null){
    server should save a "flag", session("visited")=true
  }
 else{don't show the alert box}
  • 对于cookie(不是那个问题),你应该看看here,非常有用的插件。

希望这有用

以上是关于一次性弹出框(SweetAlert2)的主要内容,如果未能解决你的问题,请参考以下文章

常用插件

bootstrap----几个插件网址

sweetalert2 全面替代 alert ,从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框

弹出框在第一次悬停在图标上时不起作用

SweetAlert2 使用教程

弹出框 popover.js