0

jQuery Fancybox (v2.1.5) を使用してモーダル ボックスでフォームを開きます。送信ボタンをクリックした後、最初の無効なフィールドまでスクロールしたいと思います。フォームの検証と必要なその他のものを処理するコードベースを既にセットアップしています。スクロール部分を除いて、すべて正常に動作しているようです。

些細なことのようですが、私はそれを機能させることができません。達成したいことの簡単な例を設定しました。

コードは次のとおりです。

HTML

<a class="fancybox" href="#modalform">Open modal form</a>

<form id="modalform">
    <ul>
        <li>
            <label id="email-label" for="email">Email</label>
            <input id="email" type="text" />
        </li>
        <li>
            <label id="password-label" for="password">Password</label>
            <input id="password" type="password" />
        </li>
    </ul>

    <input type="submit" value="Log In" />
</form>

CSS

#modalform {
    display: none;
    position: relative;
    width: 200px; height: 1000px;
}

ul li:not(:first-child) {
    margin-top: 1em;
}

label {
    display: block;
}

input {
    width: 100%; height: 2em;
}

input[type="submit"] {
    position: absolute;
    bottom: 0; left: 0;
}

JavaScript (jQuery 1.x を使用)

$('.fancybox').fancybox({
    autoResize: false,
    fitToView: false
});

$('input[type="submit"]').click(function () {
    $('input:not([type="submit"])').each(function () {
        var targetId = $(this).attr('id') + '-label';

        if ($(this).val().trim() === '') {
            // TODO: scroll to #targetId
            // Doesn't work (obviously?), but shows what I'm trying to achieve
            $(document).scrollTop($('#' + targetId).offset().top);
            // Note: document may not be the correct element to select,
            // but it doesn't work either with the other elements I've tested

            return false;
        }
    });

    return false;
});

この例は JSFiddle: http://jsfiddle.net/eYtme/にあります。

あなたはそれを機能させることができますか？

4

1 に答える 1

0

$('.fancybox-overlay')の代わりに選択したいものですdocument。

$('.fancybox-overlay').scrollTop($('#' + targetId).offset().top);
于 2013-10-16T06:21:44.603 に答える