1

我正在使用 jQueryTools 提供的模态表单。我想在我的一个页面上使用模态表单，使用此处提供的示例：http: //flowplayer.org/tools/demos/overlay/modal-dialog.htm

由于以下原因，我需要修改上面给出的示例：

  1. 我的网页将在页面上有动态数量的表单（该示例使用硬编码数字 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 回答