如何使用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主库。 所需的包括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正确显示弹出对话框

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-09-13 13:13:32

解决方案2
0 2015-09-13 13:33:59

解决方案3
0 2015-09-13 13:34:21

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-09-13 13:13:32

解决方案2 0 2015-09-13 13:33:59

解决方案3 0 2015-09-13 13:34:21

解决方案1
1 已采纳 2015-09-13 13:13:32

解决方案2
0 2015-09-13 13:33:59

解决方案3
0 2015-09-13 13:34:21