模态关闭跳转到页面底部答案

【问题标题】：Modal close jumping to the page bottom模态关闭跳转到页面底部
【发布时间】：2020-09-29 09:42:00
【问题描述】：

我有一个 ModalPartial。在页面上，我使用了 HTML5 错误，例如输入框的最小、最大长度。

这个页面很大，触发模态弹窗的按钮在底部。

<button type="button"
        class="button"
        asp-route-id="@Model.Id"
        asp-route-culture="@culture"
        data-toggle="modal"
        data-target="#MyModal"
        asp-page-handler="Create">
</button>

我找到了如何“向上滚动”到有错误的输入。

var elements = document.querySelectorAll('input,select,textarea');
var invalidListener = function () { this.scrollIntoView(false); };

for (var i = elements.length; i--;)
    elements[i].addEventListener('invalid', invalidListener);

但是当我隐藏模式时，使用以下代码：

$("#myModal").modal('hide');

页面滚动回显示模式的按钮。我想防止这种情况。我尝试了 event.preventDefault() 但它不起作用。

【问题讨论】：

我不确定我是否理解。因此，当您单击按钮时，如果表单中有错误，则会显示一个模式。然后关闭模式并成功地将错误（输入错误）滚动到视图中？什么时候页面滚动回触发模态的按钮（初始页面状态）？
还是这个模态中的表格？如果您能阐明这些步骤，我们应该能够提供帮助。
哦，在模态中我有一个按钮，在滚动到输入框后提交表单，因为有错误，我想关闭模态以修复输入，但是当我关闭模态时，页面回到触发模式打开的那个按钮。

标签： javascript c# model-view-controller razor bootstrap-modal

【解决方案1】：

解决办法是：

当我检查 javascript 中的 html 错误时，我也在关闭模式，从代码中，然后不会跳转到底部页面。

【讨论】：