最初のロード時にのみダイアログボックスを表示

Question

現在、ページが読み込まれるたびに自動的に表示されるダイアログボックスがあります。しかし、私は検索などの機能を持っているので、ユーザがエントリを検索すると、ページが再び読み込まれているので、ポップアップボックスが再び表示されます。

ダイアログボックスは、ページが初めて読み込まれるときに表示されるようにするにはどうすればよいですか？ここで

は、ダイアログボックスのための私のHTMLコードです：

<!-- Dialog box --> 
<div id="dialog-form" title="Instructions"> 
    <form> 
    <fieldset>   

     <ul> 
      <li>These are instructions</li><br> 
      <li>that should be displayed</li><br> 
      <li>inside the dialog box</li><br> 
      <li>on the first load only</li> 
     </ul> 

    </fieldset> 
    </form> 
</div> 

はJavaScript：

$(function() { 

    var dialog = $("#dialog-form").dialog({ 
     autoOpen: true, 
     height: 400, 
     width: 350, 
     modal: true, 
     buttons: { 
     OK: function() { 
      dialog.dialog("close"); 
     } 
     } 
    }); 
    }); 

Answer 1

あなたはsessionStorageを使用することができます。

初めてポップアップを表示するときは、sessionStorage.setItem("variableName", "value");を使用して値を設定して、これをブラウザのsessionStorageにマークします。

sessionStorage.getItem("variableName");を使用して、その値が既にブラウザのsessionStorageに設定されているかどうかを確認するポップアップを表示する前に、チェックを追加します。

sessionStorageは、ブラウザのタブ/ウィンドウを閉じるまで、変数をブラウザのメモリに保持します。したがって、ページの読み込み全体でうまく動作します。

$(function() { 
    var popupDisplayed = sessionStorage.getItem("popupDisplayed"); 
    if(popupDisplayed !== "true"){ 
    var dialog = $("#dialog-form").dialog({ 
     autoOpen: true, 
     height: 400, 
     width: 350, 
     modal: true, 
     buttons: { 
     OK: function() { 
      dialog.dialog("close"); 
     } 
     } 
    }); 

    // mark this in sessionStorage 
    sessionStorage.setItem("popupDisplayed", "true"); 
    }//if not found in sessionStorage 
    }); 

Answer 2

編集：

あなたは、一つのセッションでのみ行うMohitによって記載されているようにSessionStorageを使用する必要がある場合。

それはポップアップが示されていないか、されているかどうかを確認するためにLocalStorage

使用Local Storageを使用し、ユーザーのブラウザに永続的に格納する必要がある場合。

$(document).ready(function() { 
    var isshown = localStorage.getItem('isshown'); 
    if (isshown== null) { 
     localStorage.setItem('isshown', 1); 

     // Show popup here 
     var dialog = $("#dialog-form").dialog({ 
     autoOpen: true, 
     height: 400, 
     width: 350, 
     modal: true, 
     buttons: { 
     OK: function() { 
     dialog.dialog("close"); 
     } 
     } 
    }); 
    } 
}); 

これは、表示する前に一度だけ

ローカルストレージを使用しての詳細情報は、それが初めて示された後、あなたは変数を設定するのsessionStorageを使用して試みることができるHere