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

【问题标题】：How to properly show a pop up dialog using html/jQuery UI如何使用 html/jQuery UI 正确显示弹出对话框
【发布时间】：2015-09-13 12:58:34
【问题描述】：

使用此代码，我想在单击按钮时显示一个 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;
  }

【问题讨论】：

控制台有错误吗？
你的代码没有问题，见fiddle

标签： javascript html jquery-ui dialog popup

【解决方案1】：

您是否加载了 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;
}

如果您没有外部 CSS，请添加到 <head> 部分。

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

【讨论】：

是的，我在头部加载 CSS，在正文结束之前加载 jQuery Ui（和其他东西）（所以我的结构与 jQuery UI 中的示例不同）。我编辑我的问题描述。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
好主意，您在编辑部分的提示对我有用！

【解决方案2】：

首先还包括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（并且我编辑了我的问题描述）

【解决方案3】：

您还需要包含 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

【讨论】：