1

jQueryTools で利用可能なモーダル フォームで遊んでいます。ここで提供されている例を使用して、自分のページの 1 つでモーダル フォームを使用したい: http://flowplayer.org/tools/demos/overlay/modal-dialog.htm

次の理由により、上記の例を変更する必要があります。

  1. 私の Web ページには、ページ上に動的な数のフォームがあり (この例ではハードコードされた数 2 を使用しています)、ハードコードされたインデックスを使用して、トリガーの配列にインデックスを付けることができます。現在表示されているフォームに基づいて閉じます。

  2. フォームを送信してサーバーから JSON 応答を取得し、その応答を使用してページ内の要素を更新する必要があります。

これは私がこれまでに持っているものです（例に基づく）。簡潔にするために、CSS などと < head > セクションなどは省略しています。私の例では、3 つのボタン/フォームがありますが、これらは動的に生成されるため、トリガーを閉じるために使用するインデックスを決定する一般的な方法を見つける必要があります。

<!-- the triggers -->
<p>
    <button class="modalInput" rel="#prompt1">User input1</button>
    <button class="modalInput" rel="#prompt2">User input2</button>
    <button class="modalInput" rel="#prompt3">User input3</button>
</p>


<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt1">
    <div>This is form 1</div>
    <form>
        <input>
        <button type="submit"> OK </button>
        <button type="button" class="close"> Cancel </button>
    </form>
</div>

<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt2">
    <div>This is form 2</div>
    <form>
        <input>
        <button type="submit"> OK </button>
        <button type="button" class="close"> Cancel </button>
    </form>
</div>

<div style="position: fixed; z-index: auto; top: 50.7px; left: 320px; display: none;" class="modal" id="prompt3">
    <div>This is form 3</div>
    <form>
        <input>
        <button type="submit"> OK </button>
        <button type="button" class="close"> Cancel </button>
    </form>
</div>    
<script>
$(document).ready(function() {

var triggers = $(".modalInput").overlay({

    // some mask tweaks suitable for modal dialogs
    mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
    },

    closeOnClick: false
});

$("form").submit(function(e) {

    // close the overlay
    /* I need to determine the correct trigger index for the current form - but how ? */
    triggers.eq(UNKNOWN).overlay().close(); 

        //This is how I think to POST the form and receive JSON response (is this right?)
        $.post("test.php", $(this).serialize(),
                function(data){
                    alert(data);
                }, 'json'
              );
    // do not submit the form
    return e.preventDefault();
});

});
</script>
4

1 に答える 1

2

jqueryindex(element)メソッドを使用します。

 triggers.eq( $('form').index(this) ).overlay().close();

これは、同じ数のトリガーとフォームがあることを前提としています..

-- フォーム送信について

あなたのコードは問題ありませんが、マイナーな問題は問題
serialize()ありませんが、入力ボックスに名前を付ける必要があります。そうしないと無視されます..
（送信関数から false を返す必要もあります）

それで

$("form").submit(function(e) {

    // close the overlay
    /* I need to determine the correct trigger index for the current form - but how ? */
    triggers.eq( $('form').index(this) ).overlay().close();  

    //This is how I think to POST the form and receive JSON response (is this right?)
    $.post("test.php", $(this).serialize(),
            function(data){
                alert(data);
            }, 'json'
          );
    // do not submit the form
    return false;
});
于 2010-06-29T23:33:05.843 に答える