Question

这可能是一个愚蠢的问题，但我对jQuery很新。我正在尝试创建一个按钮，单击该按钮将弹出一个登录对话框。不知何故，表单显示而不是创建为对话框。以下是我的代码：

<head>
    <script src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script>
        $(function() {   
            $('#login').dialog({
                    autoOpen: false,
                    title: 'Login',
                    height: 300,
                    width: 350,
                    modal: true
            });

            $('#open').click(function() {
                $('#login_form').dialog('open');
                return false;
            });
        });
    </script>        
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="login">
        <form class="caption" action="Login.php" method="post">           

        <p>E-mail: <br><input type="text" name="email" maxlength="255" /></p>
        <p>Password:</p> <br><input type="password" name="pwd" /></p>
        <p><input type="submit" value="Login" /></p>

        </form>

    </div>
    <button id="open">Click</button>
</body>

知道我做错了什么吗？非常感谢你！

Answer 1

更改

$('#open').click(function() {
                $('#login_form').dialog('open');
                return false;
            });

要

$('#open').click(function() {
                    $('#login').dialog('open');
                    return false;
                });

由于您的对话框div的ID为login而不是login_form。

Working Fiddle

Answer 2

亚历克斯W上面有这个：

来自https://developers.google.com/speed/libraries/devguide#jqueryUI

注意：这个库依赖于jquery。您还必须先加载jquery 加载此模块。

此外，您正在尝试open #login_form元素，而不是#login元素。您需要使用相同的jQuery集。请参阅下面的修改后的代码。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script>
        $(function() {   
            $('#login').dialog({
                    autoOpen: false,
                    title: 'Login',
                    height: 300,
                    width: 350,
                    modal: true
            });

            $('#open').click(function() {
                $('#login').dialog('open');
                return false;
            });
        });
    </script>        
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="login">
        <form class="caption" action="Login.php" method="post">           

        <p>E-mail: <br><input type="text" name="email" maxlength="255" /></p>
        <p>Password:</p> <br><input type="password" name="pwd" /></p>
        <p><input type="submit" value="Login" /></p>

        </form>

    </div>
    <button id="open">Click</button>
</body>

jQuery对话框无法按预期工作

2 个答案: