jQuery 在论坛字段上覆盖一个 div

Question

假设我制作了一个大表格。
让表单的一个元素是这样的:

<form>
...

<tr>
<td><div id="username"><input name="username" id="username" type="text"/></div></td>
</tr>

...
</form>

现在我在底部放置了一个 div，如下所示:

<div id="submiter">Submit</div>

现在我有了这个 js:

$("#submiter").click(function() {
    $.post("submiter.php",
        $("#formmain").serialize(),
        function(data) {
        $.each(data,function(){
          id=thisid;
          error=this.error;
          //want some code here to over lay div with the id got with this.id
        }) },'json')
});

现在 php 以这种格式返回 json

[{id:formelementid,error:The error}]

问题:如何完全覆盖带有类errors的div，为简单起见让div为#username？一个演示会非常好

Answer 1

这是一个 CSS 问题:

.errors {
    position:absolute;
    z-index:2; /* Or higher than parent div */
    width:100%;
    height:100%;
    background-color:#FFF; /* Whatever */
}

如果你想用 JQuery 附加这个 div，使用 append^[docs] :

$('<div class="errors"/>').appendTo('#my_form');

在你的例子中，它会像这样工作:

$("#submiter").click(function() {
    $.post("submiter.php",
        $("#formmain").serialize(),
        function(data) {
            var errors = '';
            $.each(data,function(){
                id=thisid;
                error=this.error;
                errors += error + '<br />'; 
            });
            $('<div class="errors"/>').appendTo('#my_form').html(errors); 
        },'json')
});

要使叠加层在用户需要时消失，只需应用点击处理程序即可:

$('.errors').live('click',function(){
    $(this).remove();
});