Блог

Главная - Вопросы по программированию - Не удается определить правильную высоту смещения документа при включении модального

Не удается определить правильную высоту смещения документа при включении модального

javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Как следует из названия, я не могу обнаружить изменение высоты смещения документа с помощью Javascript при включении / открытии модального. Он хорошо работает без модального, т.Е. Возвращает правильные пиксели, если есть изменения в высоте смещения.

Я хочу, чтобы javascript определял модальную высоту смещения и возвращал правильные пиксели, чего в настоящее время нет. Было бы очень полезно, если бы я знал, почему возникает эта проблема, а также решение этой проблемы.

Я опубликовал тестовый код для этой проблемы ниже. Вы могли бы лучше протестировать его на jsfiddle или локально. Высота смещения будет отображаться в журнале консоли.

https://jsfiddle.net/z0euqgLj/

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 id="appendme">Some Text</h2>
  <button type="button" class="btn btn-success" onclick="appendtext()">Add more text</button>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">amp;times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2><h2>Some Text</h2>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
<script>
//Check the Document offsetHeight every 500 milliseconds
$(document).ready(function() { 
    setInterval(checkH, 500);   
});

//Check the offsetHeight
function checkH(){
 var offsetH = document.body.offsetHeight;
 console.log(offsetH);
}

function appendtext(){
    $("#appendme").append('<br>Some Text');
}
</script>
</body>
</html>

Комментарии:

1. Что вы ожидаете получить, когда модальный режим открыт? Поскольку модальное absolute позиционируется, оно не является частью потока документов.

2. Здравствуйте, я обновил сообщение в соответствии со своими ожиданиями. Спасибо, что сообщили мне, почему это происходит.

3. Позвольте мне посмотреть, понимаю ли я. Вы хотите получить высоту тела, но если тело не имеет полной высоты окна, вам нужна высота окна. Если это так, Math.max(window.innerHeight, document.body.scrollHeight) — jsfiddle.net/moshfeu/v5b8au7c/1 .

Метки: