1

フォームを含むファンシーボックス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;
}

2回目にポップアップを起動したときにエラーメッセージを生成する場合を除いて（つまり、フォームをリセットした後）、すべてうまく機能しています。メッセージは 30 ピクセル下に表示されます。

ファンシーボックスを初めて起動したとき ファンシーボックスを2回目に起動したとき（つまり、プラグインをクリアした後）

位置が再計算される理由について何か考えはありますか? FF14 を使用していますが、chrome でも同じ問題が発生します。どんな助けでも大歓迎です！

4

1 に答える 1

0

HTML マークアップを投稿していませんが、配置はそれに適用されたabsolute最も近い親要素を基準にしています。position: <anything other than static, eg. relative or absolute>

次の 2 つのことを行うことができます。

  1. 配置を使用せずblock、要素とmargin
  2. aまたは a のように、各ラベルとフィールドを独自の要素でラップします。divfieldset
于 2012-08-13T03:22:02.233 に答える