Display a Popup Only Once Per User

Display A Popup Only Once Per User

*Note : This will show popup once per browser as the data is stored in browser memory.

Try HTML localStorage.

Methods :

• localStorage.getItem('key');
• localStorage.setItem('key','value');

---

$j(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $j('#popup').delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $j('#popup-close, #popup').click(function() // You are clicking the close button
    {
        $j('#popup').fadeOut(); // Now the pop up is hidden.
    });
});

Working Demo

Display popup only once per visit

You could use localstorage for this as well. To set a storage item: localStorage.setItem('myPopup','true'); and to check for it you could do something like this:

var poppy = localStorage.getItem('myPopup');

if(!poppy){
    function PopUp(){
        $('.home-popup').fadeIn(500);
    }

    setTimeout(function(){
        PopUp();
    },1000); // 1000 to load it after 1 second from page load

    $('.close-popup-btn').click(function() {
        $('.popup').fadeOut(300);
    });
    localStorage.setItem('myPopup','true');
}

Modal pop up one time per user

You have to keep record of the modal displays. To store that info, you can either use a cookie or the localStorage. Based on the stored value, you can decide whether to show the modal or not.

The sample below uses the localStorage as an example:

$(document).ready(function () {
    // Check if user saw the modal
    var key = 'hadModal',
        hadModal = localStorage.getItem(key);

    // Show the modal only if new user
    if (!hadModal) {
        $('#eBookModal').modal('show');
    }

    // If modal is displayed, store that in localStorage
    $('#eBookModal').on('shown.bs.modal', function () {
        localStorage.setItem(key, true);
    })
});

Available as a Codepen too.

If you would like to hide the modal just from those who already submitted the form, you should set the flag upon form submit, like so:

$('#eBookform').on('submit', function (event) {
    // event.preventDefault();// depending on your use case
    localStorage.setItem(key, true);
})

Note: to reset the stored value, just call localStorage.removeItem('hadModal').

How to show a (modal) popup only once per user in R/Shiny?

Here is how you can do it. This demo uses a js library called "js-cookie", an easy API to get and set cookies. No need to use additional R packages.

library(shiny)

ui <- fluidPage(
  HTML('<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>'),
  tags$script(HTML(
    '
    $(document).on("shiny:connected", function(){
      var newUser = Cookies.get("new_user");
      if(newUser === "false") return;
      Shiny.setInputValue("new_user", true);
      Cookies.set("new_user", false);
    });
    '
  ))
)

server <- function(input, output, session) {
  observeEvent(input$new_user, {
    req(input$new_user)
    showModal(modalDialog(
      easyClose = TRUE, footer = NULL,
      h1("Welcome new user!")
    ))
  })
  
}

shinyApp(ui, server)

If the CDN is not working, use the link to js-cookie github download and replace the script with your local copy.

The trick here is you store the info in browser's cookie. Every time users visit, get the cookie first then decide if you show the modal.

This method will only show the modal to each user only once and even if they refresh the browser, it will not appear again.

You need to open cookie settings to clear current cookies in order to see the modal again. Here I use Chrome as an example.

Popup on website load once per session

I know I shouldn't really do this and provide you with the answer without you trying to attempt it first because you won't be learning that way.

But I'm feeling nice today, so I'm providing you of a way of doing a pop up on first load and not loading the pop again until the session been destroyed.

You need to set the session, when you load the page by doing the following:

sessionStorage.setItem('firstVisit', '1');

Then you just need to check for the session like this:

If there is no session called firstVisit then show message box

    if (!sessionStorage.getItem('firstVisit') === "1")
    {
       $(".message").show(); 
    } 

EXAMPLE

HTML

<div class="message">
    <div class="message_pad">
        <div id="message"></div>
        <div class="message_leave">

        </div>
    </div>
</div>

JavaScript/JQuery

// Save data to sessionStorage
sessionStorage.setItem('firstVisit', '1');

/* Fix size on document ready.*/
$(function()
{
    if (!sessionStorage.getItem('firstVisit') === "1")
    {
       $(".message").show(); 
    } 

    //Close element.
    $(".message").click(function()
    {
       $(this).hide();
    });

    $(".message").css({
        'height': $(document).height()+'px'
    });
    $(".message_pad").css({
        'left': ($(document).width()/2 - 500/2)+'px'
    });
});
/*
* Fix size on resize.
*/
$(window).resize(function(){
    $(".message").css({
        'height': $(document).height()+'px'
    });
    $(".message_pad").css({
        'left': ($(document).width()/2 - 500/2)+'px'
    });
});

JSFIDDLE

---

Related Topics