繁体   English   中英

如何在每次访问时显示一次JavaScript弹出窗口?

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

提示:本站为国内最大中英文翻译问答网站,提供中英文对照查看,鼠标放在中文字句上可显示英文原文

我对JavaScript非常陌生,我需要帮助配置此代码以允许弹出窗口仅在每个会话中发生一次。 我已经尝试搞乱让它工作,但没有让它工作。 请帮忙!

这是我的代码:

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 }
        })              
    }

});

如果按会话表示每次用户访问页面而不是服务器端会话,则不需要ajax来存储每个会话的变量。

现代浏览器具有存储,它们保持客户端以进行简单的数据存储和操作(不是安全数据)。 您可以尝试使用sessionStorage在用户浏览页面时存储数据。 页面关闭时,数据会丢失:

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
}

要检查存储在sessionStorage的数据,请转到您的开发人员工具(在Chrome 56:F12 - >应用程序选项卡 - >会话存储(左侧菜单)中)。

所有现代浏览器都支持功能

请注意, localStorage永久存储数据,因此如果用户关闭您的页面并明天返回,则不会显示弹出窗口,因为数据仍然可用。 它似乎不是你想要的行为。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM