仅在首次加载时显示对话框 [英] Only Displaying Dialog Box on First Load

问题描述

我目前有一个对话框，每次页面加载时都会自动显示。但是，我有搜索功能，所以当用户搜索条目时，它会再次显示弹出框，因为页面正在被加载。

我可以得到它，以便对话框只显示第一次加载页面？

这是我的对话框的HTML代码：

 <！ - 对话框 - > 
< div id =dialog-formtitle =指令> 
< form> 
< fieldset> 
 
< ul> 
< li>以下是说明< / li>< br>应显示的
< li>< / li>< br>对话框中的
< li>< / li>< br>仅在第一次加载时为
< li>< / li> 
< / ul> 
 
< / fieldset> 
< / form> 
< / div> 
  

JavaScript：

 < code $（b 
 
 
 
 
 $ dialog $ = $（＃dialog-form）.dialog（{
 autoOpen：true，
 height：400 ，
 width：350，
 modal：true，
按钮：{
 OK：function（）{
 dialog.dialog（close）; 
} 
} 
}）; 
}）; 
  

解决方案

您可以使用 sessionStorage 。

第一次显示弹出窗口时，通过使用 sessionStorage.setItem（variableName，value）设置一些值，将其标记在浏览器的sessionStorage中。 ）; 。

现在，在显示弹出窗口之前添加一个检查，检查浏览器的sessionStorage中是否已经使用 sessionStorage.getItem（variableName ）; 。

sessionStorage 保留浏览器内存中的变量，直到您关闭浏览器标签/窗口。所以，它可以在页面加载时正常工作。

  $（function（）{
 var popupDisplayed = sessionStorage.getItem popupDisplayed）; 
 if（popupDisplayed！==true）{
 var dialog = $（＃dialog-form）.dialog（{
 autoOpen：true，
 $ height：400，
 width：350，
 modal：true，
按钮：{
 OK：function（）{
 dialog.dialog（close ）; 
} 
} 
}）; 
 
 //在sessionStorage中标记这个
 sessionStorage.setItem（popupDisplayed，true）; 
} //如果在sessionStorage 
中找不到}}; 
  

I currently have a dialog box that automatically displays each time the page is loaded. However, I have functionalities such as a search so when a user searches for an entry, it will then display the popup box again since the page is being loaded again.

How can I get it so that the dialog box only displays the first time the page is loaded?

Here is my HTML code for the dialog box:

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

解决方案

You can use sessionStorage.

When first time you show the popup, mark this in browser's sessionStorage by setting some value using sessionStorage.setItem("variableName", "value");.

Now, add a check before you show the popup that checks whether that value is already set in browser's sessionStorage by using sessionStorage.getItem("variableName");.

sessionStorage keeps variables in browser's memory until you close the browser tab/window. So, it works fine across page loads.

$( 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
  });

这篇关于仅在首次加载时显示对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！