创建一个 jquery ui 对话框答案

【问题标题】：creating a jquery ui dialog创建一个 jquery ui 对话框
【发布时间】：2014-07-25 17:01:00
【问题描述】：

我想知道我需要做的一切只是在屏幕上显示一个基本的 jquery 对话框。下面是我的代码。任何帮助为什么在执行下面的代码时没有呈现任何 UI 属性？如果用户单击按钮当前发生的所有事情，应该出现一个对话框模式，但它没有显示为什么？这里是html页面

<!DOCTYPE html>
<html>
<head>
    <title>modal box</title>
    <link rel="stylesheet" href="style/jquery-ui.css">
    <script src="jquery/jquery-1.10.2.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <link rel="stylesheet" href="style/style.css">
    <style>
        body { font-size: 62.5%; };
        label, input { display:block; };
        input.text { margin-bottom:12px; width:95%; padding: .4em; };
        fieldset { padding:0; border:0; margin-top:25px; };
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
    </style>
    <script>
    $(function() {
    var dialog;
            dialog = $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": addUser,
                Cancel: function() {
                    dialog.dialog( "close" );
                }
            },
            close: function() {
                form[ 0 ].reset();
                allFields.removeClass( "ui-state-error" );
            }
        });
        });

    </script>
</head>
    <body>
      <div id="dialog-form" title="Create new user">
        <p class="validateTips">All form fields are required.</p>
        <form>
          <fieldset>
              <label for="name">Name</label>
              <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
              <label for="email">Email</label>
              <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
              <label for="password">Password</label>
              <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">

              <!-- Allow form submission with keyboard without duplicating the dialog button -->
              <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
        </fieldset>
    </form>
    <button id="create-user">Create new user</button>
 </div>     
 </body>

style.css

   body {
      font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
      font-size: 62.5%;
   }

jquery-ui.css

 .ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
 }
 .ui-widget .ui-widget {
    font-size: 1em;
 }
 .ui-widget input,
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1em;
 }
 .ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
    color: #222222;
 }
 .ui-widget-content a {
    color: #222222;
 }
 .ui-widget-header {
    border: 1px solid #aaaaaa;
    background: #cccccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
    color: #222222;
    font-weight: bold;
 }
 .ui-widget-header a {
    color: #222222;
 }

【问题讨论】：

我假设“创建新用户”按钮是应该打开对话框的按钮？目前您没有连接到打开对话框的.click() 处理程序，而您有autoOpen: false。您希望对话框如何出现？
也许我错了，但是button 的click event handler 在哪里实际显示dialog？
看起来您只是在创建dialog，但实际上并没有显示它。

标签： jquery html css jquery-ui

【解决方案1】：

我想你忘了添加.click() 处理程序来打开对话框。目前，没有点击处理程序，您有autoOpen: false。对话框将被创建，但它不会被打开。

假设“创建新用户”是打开对话框的按钮，请尝试在文档准备功能中添加以下内容：

$('#create-user').on('click', function () {
    dialog.dialog("open");
});

完整文档就绪片段：

/* Initialize the dialog */
$(function() {
    var dialog;
    dialog = $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": addUser,
            Cancel: function() {
                dialog.dialog( "close" );
            }
        },
        close: function() {
            form[ 0 ].reset();
            allFields.removeClass( "ui-state-error" );
        }
    });

    /* Create a handler to open the dialog */
    $('#create-user').on('click', function () {
        dialog.dialog("open");
    });
});

此外，我认为对象的属性名称中不能有空格。您在按钮对象中的属性“创建帐户” 无效。尝试将其重命名为 "createAnAccount"。

API 参考： .dialog("open");

【讨论】：

【解决方案2】：

我认为您需要致电dialog("open");。

您的autoOpen 参数设置为false。它禁止自动打开对话框。

【讨论】：

【解决方案3】：

DEMO

您需要注释掉代码行"Create an account": addUser,，因为function addUser未定义，然后您需要在对话框初始化完成后添加代码行dialog.dialog("open");才能打开对话框。

完整的JS代码：

$(function() {
    var dialog;
            dialog = $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                //"Create an account": addUser,
                Cancel: function() {
                    dialog.dialog( "close" );
                }
            },
            close: function() {
                form[ 0 ].reset();
                allFields.removeClass( "ui-state-error" );
            }
        });
    dialog.dialog("open");
 });

【讨论】：