如何使用html/jQuery UI正确显示弹出对话框

How to properly show a pop up dialog using html/jQuery UI

本文关键字：显示 对话框 UI 何使用 html jQuery      更新时间：2023-09-26

使用这段代码，我想在单击按钮时显示一个jQuery UI对话框。但是，在页面加载时，对话框的文本会显示一小段时间。实现这一点的正确方法是什么?我的html: 

<!DOCTYPE html>
  <html>
    <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
    </head>
    <body>
      .. html code ..
      <button id="helpbutton" title="">Help</button>
      <div id="helpdialog" title="Help dialog">
        <p>Text in the dialog will be visible for a short time when the page loads</p>
      </div>
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
      <script type="text/javascript" src="myJsFile.js"></script>
    </body>
  </html>

正如您所看到的，出于性能原因，我在结束之前调用了外部脚本。

myJsFile.js: 

    //Fire up the help dialog when the help button is pressed
    jQuery(function() {
      jQuery( "#helpdialog" ).dialog({
        autoOpen: false
      }); 
      jQuery( "#helpbutton" ).click(function() {
        jQuery( "#helpdialog" ).dialog( "open" );
      });
    });

解决方案(感谢krzmig):在CSS文件或章节

中使用此CSS代码
  #helpdialog {
    display: none;
  }

是否加载了UI jQuery JS和CSS?就像下面这个例子:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script>
        $(function() {
            $( "#dialog" ).dialog();
        });
        </script>
    </head>
    <body>
    <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    </body>
    </html>

来源:https://jqueryui.com/dialog/

编辑:

如果网站加载时不显示对话框，请将其放入CSS文件代码:

#helpdialog {
  display: none;
}

或添加到<head>部分，如果你没有外部的CSS。

<style>
#helpdialog {
  display: none;
}
</style>

First也包括jquery。第二把你的脚本在你的html对话框之前，这样它加载和隐藏对话框之前它可以显示在你的页面上。下面是代码(保持您的myJsFile.js完整):

<!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
      <button id="helpbutton" title="">Help</button>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
      <script type="text/javascript" src="myJsFile.js"></script>

      <div id="helpdialog" title="Help dialog">
        <p>Text in the dialog will NOT! be visible for a short time when the page loads</p>
      </div>
    </body>
  </html>

还需要包含jquery主库。所需的包括jquery库、jquery ui js和jquery ui css。

  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <script type="text/javascript" src="myJsFile.js"></script
相关文章：