1

我有一个包含表单的fancybox http://fancybox.net 。

在我运行 jQuery 验证插件的表单上：http: //docs.jquery.com/Plugins/Validation/Validator

错误消息使用 position:absolute 和上边距直接定位在输入下方。

var validator = $("#contact-us").validate({
        messages: {
            name: "Please enter your name",
            phone: "Please enter your phone number",
            email: "Please enter a valid e-mail address"
        }
    });

// Launch lightbox

$(".launch-form").fancybox({
    'speedIn'           :   500,
    'speedOut'          :   300,
    'overlayOpacity'    :   0.9,
    'overlayColor'      :   '#000',
    onComplete          :   function() {$('#cta-name').focus();},
    onCleanup           :   function() {validator.resetForm();}

});

label.error {
    background-color: #ae4136;
    color: #FFFFFF;
    font-size: 10px;
    margin-top: 30px;
    padding: 1px 5px 2px 5px;
    position: absolute;
    right: 21px;
    line-height:1.2;
    height:12px;
}

一切都很好，除了当我第二次启动弹出窗口时生成错误消息（即：重置表单后）。消息显示低 30px：

我第一次启动fancybox 我第二次启动fancybox（即：清除插件后

关于为什么重新计算职位的任何想法？我正在使用 FF14，但同样的问题出现在 chrome 上。任何帮助表示赞赏！

4

1 回答 1

0

您尚未发布您的 HTML 标记，但absolute定位是相对于已position: <anything other than static, eg. relative or absolute>应用到它的最近的父元素。

你可以做两件事：

  1. 不要使用定位，只使用block元素和margin
  2. 将每个标签和字段包装在其自己的包含元素中，例如 adiv或 afieldset
于 2012-08-13T03:22:02.233 回答