2017-02-02 8 views
1

私はJavaScriptが非常に新しく、このコードを設定すると、セッションごとに1回のみポップアップができるようにする必要があります。私はそれをうまく動作させるためにいたずらを試みましたが、うまく動作しませんでした。助けてください!ここで訪問ごとに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 } 
     })    
    } 

}); 
+0

こんにちは。 JavaとJavaScriptは、互いに関係のない2つの完全に別個の言語であることに留意してください。あなたのタグとタイトルを編集しています。 –

+0

JavaはJavaScriptとは関係ありません – epascarello

+1

[1回の訪問で1回のみポップアップを表示](http://stackoverflow.com/questions/41857227/display-popup-only-once-per-visit) –

答えて

3

セッションであなたがするたびにユーザーのアクセスを意味する場合は、ページではなく、サーバー側のセッション、セッションあたりの変数を保存するために、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 - > [アプリケーション]タブ - > [セッションストレージ(左メニュー)) 。

このfeature is supportedはすべての現代のブラウザにあります。

localStorageはデータを永続的に保存するため、ユーザーがページを閉じて明日戻っても、データは引き続き利用できるため、ポップアップは表示されません。それはあなたが望む行動ではないようです。

関連する問題