1

这可能是一个愚蠢的问题，但我对 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>

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

4

2 回答 2

1

亚历克斯 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>
于 2012-06-15T13:31:43.647 回答
1

改变

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

至

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

由于您的对话框 div 的 idlogin不是login_form.

工作小提琴

于 2012-06-15T13:26:09.480 回答