【问题标题】:One-Time Pop-Up Box (SweetAlert2)一次性弹出框 (SweetAlert2)
【发布时间】:2016-06-08 18:50:26
【问题描述】:

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

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

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

【问题讨论】:

  • 简单回答(只是为了给你一个方向),一旦用户点击,客户端应该与服务器进行一些通信,并且在后端,你应该在会话中添加一些东西(例如,您可以添加一个标志 isVisited = true)。然后当您再次重新加载页面时,在服务器端首先检查会话,当您准备好将内容呈现给客户端时,发送参数告诉客户端是否要显示弹出框。

标签: javascript jquery cookies sweetalert sweetalert2


【解决方案1】:

您可以使用 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
}

【讨论】:

    【解决方案2】:

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

    if (!localStorage.returning) {
        // run only if returning not stored in localStorage
    
        swal( ... ); // alert
        localStorage.returning = true; // set returning
    }
    

    【讨论】:

      【解决方案3】:

      Cookie 不是您的出路, 就像@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}
      
      • 对于cookies(不是那个问题),你应该看看here,非常有用的插件。

      希望对你有帮助

      【讨论】:

      • 当您开始回答说不要使用 cookie 只是为了告诉他使用最终使用 cookie 的会话时,您自相矛盾...... OP 还表示他们不知道如何使用cookies,所以如果他们不知道如何使用cookies,他们肯定不会知道会话管理。对于 OP,最简单和最短的答案是使用 cookie。
      猜你喜欢
      • 2018-08-03
      • 2021-12-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-07-01
      相关资源
      最近更新 更多