Bootstrap 3模态弹出窗口防止焦点滚动到顶部

Question

我有几个Bootstrap模态，其长度大于我的屏幕。这意味着Bootstrap会自动将焦点放在模态的底部。

在显示模态后，我将焦点设置在.modal-header上，如下图所示，以显示模型的顶部而不是底部。它现在自动滚动到顶部，但我怎么能不滚动？

 $('.modal-header').focus();

Answer 1

你可以在那里使用一些没有焦点的css脚本：

.modal .modal-body {
    max-height: 90vh; // the height you want (vh means viewport height)
    overflow-y: auto; // this will allow the middle area to scroll.
}

如果您仍然需要焦点，可以使用此片段保存位置并在聚焦后恢复位置：

var x = window.scrollX || window.pageXOffset || document.documentElement.scrollTop,
    y = window.scrollY || window.pageYOffset || document.documentElement.scrollLeft;
$('.modal-header').focus();
window.scrollTo(x, y);