Question

打开模态的按钮靠近页面底部，但模态在顶部打开并将页面滚动到顶部。

我想：

停止滚动页面到顶部，
在当前滚动位置的视图中显示模态。

这是在第三方应用程序 (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 中的溢出有关。

Bootstrap 模式将页面滚动到顶部

0 个答案: