显示关闭并返回主 html 列表的 Javascript 模式

Question

对 javascript、jquery 和 bootstrap 等相当陌生，所以请耐心等待。我遇到一种情况，我想在用户点击“验证”按钮后在模型对话框中显示错误列表。完成所有工作 - 我正在生成一个对象列表，向用户表明他们需要更多工作才能到达需要额外数据输入的确切位置。我有一个 DIV“id”，它代表需要更多数据的字段(每个项目都会跳转到不同的地方)。我不需要下拉列表，因为有很多很多这些项目。

几个问题:

1. 如何从模式跳转到主 html。我相信我在其他几篇文章中看到了我正在寻找的scrollIntoView，但是它会跳到DIV并关闭模式吗？
2. 我应该对列表使用什么结构？列表滚动按钮？它的大小可能非常大(数百)，因此需要滚动功能。
3. 最后，应用程序通过下一个和上一个按钮进行“分页”。我想从跳转到尚未显示​​的页面来看不会有问题吧？

这是当前的模式代码:

<script id="template-validation-error" type="text/x-handlebars-template">
    <div id="validationErrorModal" class="modal">
        <div class="message-container">
            <div class="header">
                Validation Errors
            </div>
            <div class="message">
                The following fields are required:
            </div>
            <div class="center">
                <input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
            </div>
        </div>
    </div>
</script>

和

showValidationError: function (fieldlist) {
    settings.focusedField = $(':focus');
    $("#validationErrorModal").detach();
    $(".device-container").append(templates.validationerror({ fieldlist }));
    $(".message-container input").focus();
},
validationErrorOk: function () {
    $("#validationErrorModal").detach();
    if (settings.focusedField) {
        settings.focusedField.focus();
    }
},

字段列表是一个对象列表，其中包含 DIV 的 id (field.id) 以及我要显示的描述 (field.fieldName)。

这是我在油漆中模拟的东西......我不相信它，但它在一般意义上显示了我正在寻找的东西:

我不需要完整的解决方案，只是想要我可以使用的机制。

更新

只是为了将来帮助其他人，使用下面正确答案中提供的信息，我有一个新代码如下:

<script id="template-validation-error" type="text/x-handlebars-template">
    <div id="validationErrorModal" class="modal">
        <div class="validation-container">
            <div class="header" align="center">
                Validation Errors
            </div>
            <div class="message">
                <div class="scrolling-container" style="background-color: rgb(238, 238, 238); height:660px">
                    <div class="grid grid-pad">
                        {{#each fieldlist}}
                        <div class="row click-row" onclick="fffdevice.validationErrorFix('{{id}}');">
                            <div class="col-7-8 field-name">{{fieldName}}</div>
                            <div class="col-1-8">
                                <img class="pull-right" src="/mysite/Content/device/images/fix.png" style="width: 40px; position:relative; top: -5px;">
                            </div>
                        </div>
                        {{/each}}
                    </div>
                </div>
            </div>
            <div><br/></div>
            <div class="center">
                <input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
            </div>
        </div>
    </div>

那么 onClick 的 Javascript 是:

validationErrorFix: function (id) {
    $("#validationErrorModal").detach();
    var x = document.getElementById(id);
    x.scrollIntoView({
        behavior: "smooth", // or "auto" or "instant"
        block: "start" // or "end"
    });
},

这将关闭对话框并跳转到该字段。它看起来像(我知道这很丑，我稍后会清理它):

Answer 1

将模态事件绑定(bind)到验证代码，并在发现错误时显示模态。

使用 html 无序列表显示带有错误列表的模式，在 li 元素内有一个 anchor 标记，其中 href 属性将具有一个值，该值的 id 对应于输入字段，所有这些都是从验证代码动态完成的.

单击列表中的错误后，使用 Bootstrap $('#your-error-modal').modal('hide'); 隐藏模式，因此代码将如下所示:

$('#your-error-modal').on('click', 'a.error-item', function(){
    $('#your-error-modal').modal('hide');
});

我还没有测试过这段代码，但是如果您在滚动到输入部分并关闭模式时遇到问题，您也可以这样做:

$('#your-error-modal').on('click', 'a.error-item', function(e){ // use this method of onclick because your list will be created dynamically
    e.preventDefault(); // prevent the default anchor tag action
    var href = $(this).attr('href'); // grab the href value
    $('#your-error-modal').modal('hide'); // close the modal first
    scrollToDiv(href); // then take the user to the div with error with a nice smooth scroll animation
});

function scrollToDiv(location) {
    $('html, body').animate({
        scrollTop: $(location).offset().top
    }, 2000);
}

这又是未经测试的代码，但想法是存在的。

出于用户体验的原因，您可能还想创建一个 float div 或用户可以单击它并返回模式以继续阅读错误列表的内容。