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

変化する

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

に

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

ダイアログdivのIDはではありloginませんlogin_form。

ワーキングフィドル

于 2012-06-15T13:26:09.480 に答える
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 に答える