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

这只会弹出一次

有关使用本地存储的更多信息，请Here

仅在首次加载时显示对话框

2 个答案: