Question

我正在使用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/。

你能让它发挥作用吗？

Answer 1

$('.fancybox-overlay')是您要选择的而不是document。

$('.fancybox-overlay').scrollTop($('#' + targetId).offset().top);

如何在Fancybox覆盖内滚动？

HTML

CSS

JavaScript（使用jQuery 1.x）

1 个答案: