1

The button for opening the modal is near the bottom of the page but the modal opens at the top and scrolls the page to top.

I want to:

  1. stop scrolling the page to top,
  2. show modal in view at the current scroll position.

This is in a webpage served by a third party application (FlowWright) but I can modify it by adding CSS or changing the call of the modal() function.

This is the body before the modal is open.

<body class="kt-header--fixed kt-header-mobile--fixed kt-subheader--enabled kt-subheader--solid kt-aside--enabled kt-aside--fixed kt-aside--minimize">

And its style.

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;

This is the body after the modal is open.

<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;">

And its style.

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;

The modal is open by this call with Button Event Listener.

$dialog.modal({ backdrop: 'static' });

I have tried adding this to the CSS as advised in some other questions but didn't work.

body.modal-open {
    overflow: visible !important;
    height: auto !important;
}

EDIT

Here is all relevant code. Much simplified from the original webpage but will let you reproduce the issue.

<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>

EDIT 2

I've tried the solutions provided in these questions but none of them appears to work. Most suggest that it is related to overflow in the CSS.

Bootstrap modal: background jumps to top on toggle

How to stop background from jumping to the top on modal toggle

How to stop background from jumping to the top on modal toggle

Bootstrap v3 - Opening a modal window forces the page to scroll up to the top

page scrolls to top on modal popup

Bootstrap Modal Dialog is auto scroll browser to top when open through JQuery

Wojciech
  • 63
  • 9

1 Answers1

0

Old question but I came across a similar issue but was able to resolve it using CSS.

However, I did end up using part of the resources here and tried a similar approach to this problem but it didn't work.

After further investigation, what seems to be happening is that the modal is being focused when shown - since it's technically at the top of the page, the default focus functionality scrolls to that element (i.e. the top).

To fix the issue in this situation, you can stop the default focus event from firing:

$("#modal").on("focus", function(event) { event.preventDefault(); })
# ES6
$("#modal").on("focus", event => event.preventDefault());
Rylee
  • 1,481
  • 1
  • 6
  • 9