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

Question

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

Answer 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>

Answer 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>

Answer 3

您还需要包含 jquery 主库。 required 包括 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

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

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

html

javascript

dialog

jquery-ui

popup