Question

我想知道我需要做的一切只有一个基本的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;
 }

Answer 1

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

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

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

Full Document Ready Snippet：

/* 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");

Answer 2

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

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

Answer 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");
 });

创建一个jquery ui对话框

3 个答案: