One-Time Pop-Up Box (SweetAlert2)

Question

I have been making use of a new pop-up box system called SweetAlert2, which makes use of Java & CSS. It looks very appealing to the user, and I wanted to use it on my website for a purpose which I am struggling to achieve. I wanted to create a one-time popup box and once it's closed the user will not see it again. I know many websites use cookies however I have no idea how to go about implementing this into my script. I would love some support with this!

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

Above is the script I use to make the pop-up box appear when the page loads, and I only want it to appear once. If anyone can point me in the right direction or provide a solution that would be great. Cheers!

To answer briefly(just for giving u a direction), once the user clicked, the client should do some communications to the server, and at the backend side, you should add something to the sessions(for example, you can add a flag isVisited = true). Then when you reload the page again, at the server side check the session first, and when you are ready to render the content to client, send the parameter to tell client if it is going to show the pop-up box or not. — Hui-Yu Lee, Jun 08 '16 at 19:43

score 2 · Accepted Answer · answered Jun 08 '16 at 19:49

2

You could use cookies to detect returning visitors:

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
}

answered Jun 08 '16 at 19:49

jpec

450
4
9

score 1 · Answer 2 · answered Jun 08 '16 at 21:32

Another option is to use localStorage / sessionStorage if it's just client side stuff. Otherwise that cookie will be sent to all other request.

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

    swal( ... ); // alert
    localStorage.returning = true; // set returning
}

score -1 · Answer 3 · edited Jun 20 '20 at 09:12

-1

Cookies are not your way to go here, like @iownthegame suggested, you should make use of the server session object. Session will last until the user left the site, so i think it is the right approach here. I don't know what is your sever side language, so i will write a pseudo:

  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}

for cookies (not for that issue), you should take a look here, very useful plugin.

Hope this was helpful

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 08 '16 at 20:10

E.Meir

2,146
7
34
52

2

You're contradicting yourself as you start off your answer saying don't use cookies only to tell him to use a session, which ultimately uses cookies... The OP also states they don't know how to use cookies, so chances are if they don't know how to use cookies, they definitely won't know about session management. The easiest and shortest answer for the OP would be to use a cookie. – michael Jun 08 '16 at 20:14

One-Time Pop-Up Box (SweetAlert2)

3 Answers3