2

jquery は初めてで、ライトボックス フォームの表示に問題があります。これに似た形が欲しい。しかし、私はそれをカスタマイズする方法がわかりません

以下は私のコードです：

<html>
<head>
    <title>Test Light Box</title>
    <script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript">
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 500,
            width: 450,
            modal: true,
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        });         

        $("#create-uer")
            .button()
            .click(function(){
                $( "#dialog-form" ).dialog( "open" );
            });

    </script>
</head>
<body>
    <div id="dialog-form">
    <form>
    <fieldset>
        <label for="name">Schlagwort</label>
        <input type="text" name="search" id="search" />
    </fieldset>
    </form>
</div>

<button id="create-user">Create new user</button>
</body>

4

5 に答える 5

2

このコードの前に jquery.css を追加する必要があります。

<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />

このページからjqueryをダウンロード

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

そしてそれをあなたのページに追加してください

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
于 2012-05-07T08:29:31.430 に答える
1

jQuery UI フォームのように見せたい場合は、スタイルシートも含める必要があります。

[テーマ]で、必要なルック アンド フィールを選択してカスタマイズし、ページにその CSS を含めることができます。

于 2012-05-07T07:38:41.897 に答える
1

このコードを試してください：

function openDialog() {

    $('#dialog').remove();

    $('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="URL of HTML page" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');

    $('#dialog').dialog({
        title: 'Title of dialog',

        close: function (event, ui) {
              // Code which you want to run at the time of close dialog box;
        },  
        bgiframe: false,
        width: 1000,
        height: 500,
        resizable: false,
        modal: false
    });
};

この場合、上記の関数を特定のボタンまたはリンクの Click イベントに配置するだけです。これは役に立ちます。

ありがとう。

于 2012-05-07T08:20:33.597 に答える
1

スクリプトを次のように変更します。

<script type="text/javascript">
$(document).ready(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 500,
        width: 450,
        modal: true,
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    });         

    $("#create-user")
        .click(function(){
            $( "#dialog-form" ).dialog( "open" );
        });
});
</script>
于 2012-05-07T08:29:36.297 に答える