How can I display a JavaScript pop-up once per visit?

Question

I am extremely new to JavaScript and I am in need of help with configuring this code to allow the pop-up to only occur once every session. I have tried messing around to get it to work, but didn't get it to work. Please help!

Here is my code:

jQuery(document).ready(function(){

    jQuery('#preview_help').hide(); 


    jQuery( '.mlab-close' ).on( 'click', function() {
        //When clicking on the close or fade layer...
        jQuery( '.mlab-modal' ).fadeOut( function() {
             jQuery( '#mlab-modal-backdrops' ).hide();  
        }); //fade them both out        
        return false;
    });


    jQuery('#mlab_popup_preview').on('click', function() { 
        //reset
        jQuery('.mlab-modal-title').html('');
        jQuery('.mlab-modal-body').html('');
        jQuery('.mlab-modal-label').val('');
        jQuery('.mlab-modal-link').attr("href", "#")
        jQuery( '.mlab-modal-footer' ).hide();
        jQuery( '.mlab-modal-donotshow' ).hide();
        //get       
        var titre = jQuery('#popup_titre').attr( 'value' );
        var text  = jQuery('#popup_content').val(); 
        var width = jQuery('#popup_width').attr( 'value' ); 
        var label = jQuery('#popup_label').attr( 'value' ); 
        var url = jQuery('#popup_link').attr( 'value' ); 
        var notshow = jQuery('#popup_donotshow' ).prop('checked')  
        //set
        if ( url.length > 0 && label.length > 0){ 
            jQuery( '.mlab-modal-footer' ).show();          
        }
        if( notshow ){
            jQuery( '.mlab-modal-donotshow' ).show();
        }
        jQuery('.mlab-modal-title').html( titre );
        jQuery('.mlab-modal-body').html( text ); 
        jQuery('.mlab-modal-dialog').css( "width", width+'px' );
        jQuery('.mlab-modal-label').val(label);
        jQuery('.mlab-modal-link').attr("href", url)

        jQuery('.mlab-modal').fadeIn(); 
    }); 

    if ( jQuery( '#mlab_popup_preview' ).is( ':disabled' ) == true ){ 
            jQuery( '#mlab_popup_preview' ).prop( 'disabled', false );
            jQuery( '#preview_help' ).hide();   
        }

    // Preview only available on text editor    
    jQuery('#popup_content-tmce').on('click', function() {           
        if ( jQuery('#mlab_popup_preview').is(':disabled') == false ){ 
            jQuery('#mlab_popup_preview').prop('disabled', true); 
            jQuery('#preview_help').show(); 
        } 
    }); 


    jQuery('#popup_content-html').on('click', function() {       
        if ( jQuery( '#mlab_popup_preview' ).is( ':disabled' ) == true ){ 
            jQuery( '#mlab_popup_preview' ).prop( 'disabled', false );
            jQuery( '#preview_help' ).hide();
        } 
    }); 


    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                jQuery("#preview_image").attr("src", e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    jQuery("#popup_img").change(function(){
        readURL(this);
    });


    jQuery("#donotshow").change(function(){ 
        SetAjax( 'session', jQuery(this).prop('checked') ); 
    });

    function SetAjax( tag, param ){
        jQuery.ajax({
          method: "POST",
          url: popup_object.ajax_url,
          data: { tag: param }
        })              
    }

});

Hi Joseph. Keep in mind that Java and JavaScript are two completely separate languages that have nothing to do with each other. I'm editing your tags and title. — Cᴏʀʏ, Feb 02 '17 at 18:11
Possible duplicate of [Display popup only once per visit](http://stackoverflow.com/questions/41857227/display-popup-only-once-per-visit) — Kursad Gulseven, Feb 02 '17 at 18:17
I really want to get into coding and so I am looking at source and skeletons of code trying to figure it out.. Sorry i didn't know the languages XD — Joseph Lindsay, Feb 12 '17 at 03:20

DontVoteMeDown · Answer 1 · 2017-02-02T18:33:24.707

You don't need ajax to store a variable per session, if by session you mean each time user access the page, and not a server-side session.

Modern browsers has a storage they keep client-side for simple data store and manipulation(not being secure data). You can try using sessionStorage which stores data while user is browsing your page. When the page is closed, the data is lost:

var hasVisited = sessionStorage.getItem("hasVisited");

// If falsy, user didn't visited your page yet.
if (!hasVisited) { 
    sessionStorage.setItem("hasVisited", true);
    showPopup(); // Shows popup only once
}

To check your data stored in sessionStorage, go to your Developer Tools(in Chrome 56: F12 -> Application tab -> Session Storage (left menu)).

This feature is supported in all modern browsers out there.

Note that localStorage stores the data permantently, so if user closes your page and get back tomorrow, the popup won't be shown, as the data will still be available. It doesn't seems to be the behaviour you desire.

How can I display a JavaScript pop-up once per visit?

1 Answers1