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

Question

对于javascript、jquery和bear等等来说，都是很新的东西，所以请原谅我。我有一种情况，在用户点击“验证”按钮后，我想在模型对话框中显示一个错误列表。得到所有的工作-我正在生成一个对象列表，向用户表明他们需要更多的工作到确切的地点，需要额外的数据输入。我有一个DIV "id“，它表示需要更多数据的字段(每个项目都会跳转到不同的地方)，.I不想要下拉列表，因为有很多这样的条目。

几个问题：

1. 如何从模式跳到主html。我相信我在其他几个帖子中提到过scrollIntoView，因为我正在寻找，但这会跳到DIV并且也关闭模式吗？
2. 我应该为列表使用什么构造？滚动按钮的列表？它的大小可能相当大(数百)，因此它需要一个滚动功能。
3. 最后，该应用程序被一个下一个和prev按钮“寻呼”。我想，从跳转到尚未显示的页面方面来说，这不会是个问题吗？

以下是当前的模态代码：

<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

将模态事件绑定到验证代码，如果发现错误，则显示模态。

使用html无序列表显示带有错误列表的模式，在li元素中显示锚标记，其中href属性将具有与输入字段对应的id值，所有这些都是通过验证代码动态完成的。

单击列表中的错误后，使用引导$('#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);
}

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

出于UX的原因，您还可能希望创建一个浮动div或其他一些东西，用户可以在其中单击它并返回到模式，继续读取错误列表。