用于打开模式的按钮位于页面底部附近，但模式在顶部打开并将页面滚动到顶部。
我想要：
这是由第三方应用程序（FlowWright）提供的网页，但我可以通过添加 CSS 或更改 modal() 函数的调用来修改它。
这是模态框打开之前的主体。
<body class="kt-header--fixed kt-header-mobile--fixed kt-subheader--enabled kt-subheader--solid kt-aside--enabled kt-aside--fixed kt-aside--minimize">
还有它的风格。
box-sizing: border-box;
line-height: 1.5;
text-align: left;
height: 100%;
margin: 0px;
-webkit-font-smoothing: antialiased;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
background: #f4f7fc;
color: var(--da-text-color, #646c9a) !important;
position: relative;
padding: 0px;
background-color: #fff !important;
这是模态框打开后的主体。
<body class="kt-header--fixed kt-header-mobile--fixed kt-subheader--enabled kt-subheader--solid kt-aside--enabled kt-aside--fixed kt-aside--minimize modal-open" style="padding-right: 17px;">
还有它的风格。
box-sizing: border-box;
line-height: 1.5;
text-align: left;
height: 100%;
margin: 0px;
-webkit-font-smoothing: antialiased;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
background: #f4f7fc;
color: var(--da-text-color, #646c9a) !important;
position: relative;
background-color: #fff !important;
overflow: auto !important;
padding: 0 !important;
通过使用按钮事件侦听器进行此调用可打开模式。
$dialog.modal({ backdrop: 'static' });
我尝试按照其他问题中的建议将其添加到 CSS 中，但没有成功。
body.modal-open {
overflow: visible !important;
height: auto !important;
}
编辑
这是所有相关代码。比原始网页简化了很多，但可以让您重现问题。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.modal-open {
overflow: auto !important;
padding: 0 !important;
}
</style>
<script>
function showModal() { $('#modal').modal({ backdrop: 'static' }); }
</script>
</head>
<body class="" style="">
<input style="position: absolute; left: 1000px; top: 2000px;" onclick="showModal()" type="button" value="Open modal">
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="position: absolute; overflow: auto; display: none;" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
</div>
<div class="modal-body" style="max-height: calc(100vh - 200px); overflow-y: scroll;">
<h4 class="modal-title" id="exampleModalLabel">Sample modal</h4>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</body>
</html>
编辑2
我已经尝试过这些问题中提供的解决方案，但似乎都不起作用。大多数人认为这与 CSS 中的溢出有关。
老问题，但我遇到了类似的问题，但能够使用 CSS 解决它。
但是，我最终使用了这里的部分资源，并尝试了类似的方法来解决这个问题，但没有成功。
经过进一步调查，似乎发生的情况是模式在显示时被聚焦 - 因为从技术上讲它位于页面顶部，默认焦点功能滚动到该元素（即顶部）。
要解决这种情况下的问题，您可以停止触发默认焦点事件：
$("#modal").on("focus", function(event) { event.preventDefault(); })
# ES6
$("#modal").on("focus", event => event.preventDefault());