jQuery对话框未按预期工作_Jquery

jQuery对话框未按预期工作

jquery

jQuery对话框未按预期工作,jquery,Jquery,这可能是一个愚蠢的问题，但我对jQuery非常陌生。我试图创建一个按钮，点击它会弹出一个登录对话框。以某种方式，表单显示出来，而不是创建为对话框。下面是我的代码： <head> <script src="js/jquery-ui-1.8.21.custom.min.js"></script> <script> $(function() { $('#login').dialog({

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


$（函数（）{
$（“#登录”）。对话框({
自动打开：错误，
标题：“登录”，
身高：300，
宽度：350，
莫代尔：对
});
$（“#打开”）。单击（函数（）{
$（'login#u form'）。对话框（'open'）；
返回false；
});
});
电子邮件：

密码：



点击

知道我做错了什么吗？多谢各位

变化

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

到

因为对话框div的id是

登录

而不是

登录表单

亚历克斯·W在上面说过：

从

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

此外，您正试图

打开#login#u 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>


$（函数（）{
$（“#登录”）。对话框({
自动打开：错误，
标题：“登录”，
身高：300，
宽度：350，
莫代尔：对
});
$（“#打开”）。单击（函数（）{
$（'登录'）。对话框（'打开'）；
返回false；
});
});
电子邮件：

密码：



点击
您是否加载了dialog工作所需的.js文件？是的，他加载了，但我想知道除了jquery ui文件之外，他是否还需要导入jquery.js文件。看起来您正在用#login
创建一个对话框，但是您正在尝试打开#login_form
？谢谢您指出这一点！当我发布我的代码示例时，我有点匆忙，我应该道歉，我犯了一个愚蠢的错误，把人们弄糊涂了。我发现，即使我让它“登录”，它仍然不工作。我怀疑我没有正确加载jQuery库。非常感谢！在包含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>