页面滚动时Modal组件渲染异常问题排查与解决请求

页面内的用户列表表格内容超出屏幕，需滚动查看。点击表格中的编辑按钮弹出用户角色编辑Modal时：

• 页面在顶部位置时，Modal渲染正常：
  
• 向下滚动表格后，Modal顶部被截断，灰色遮罩无法覆盖整个页面底部：
  

需求：让Modal始终在当前可视屏幕内正确渲染，而非固定从页面顶部位置显示。

<!-- Modal for User Role Update -->
<div class="modal fade modal-center" id="updateUserRole" tabIndex="-1" role="dialog" aria-labelledby="updateUserRoleModalLabel" aria-hidden="true" data-backdrop="false">
    <form id="updateUserRoleModalForm" method="post">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-content-role">

                <div class="modal-header p-3 bg-primary">
                    <h5 class="modal-title pl-3" id="updateUserRoleLabel">Edit User Role</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </div>

                <div class="modal-body p-4">
                    <div class="div-registration px-3">
                        <div class="div-update-form-input">

                            <div class="form-group d-flex flex-row align-items-center mb-2 text-secondary">
                                <div class="form-label">
                                    <label type="label" name="lblUserID" data-toggle="tooltip" data-placement="left" title="Selected user">User ID</label>
                                    <i class="px-1 fa fa-user text-secondary larger-icon" aria-hidden="true"></i>
                                </div>
                                <div class="form-input">
                                    <input type="text" class="form-control disabled-input ml-2 currentUserId" id="userID" name="userID"
                     style="background-color: lightgray;" <%= user_name_cd %> placeholder="USER ID" disabled>
                                </div>
                            </div>
                            <div class="form-group d-flex flex-row align-items-center mb-2 text-secondary">
                                <div class="form-label">
                                    <label type="label" name="lblCurrentRoleCode" data-toggle="tooltip" data-placement="left" title="Current role code">Current Role</label>
                                    <i class="px-1 fa fa-user-times text-secondary larger-icon" aria-hidden="true"></i>
                                </div>
                                <div class="form-input">
                                    <input type="text" class="form-control disabled-input ml-2 currentRoleCode" id="currentRoleCode" name="currentRole"
                     style="background-color: lightgray;" <%= user_name_cd %> placeholder="CURRENT ROLE CODE" disabled>
                                </div>
                            </div>
                            <div class="form-group d-flex flex-row align-items-center mb-2 text-secondary">
                                <div class="form-label">
                                    <label type="label" name="lblNewRoleCode" data-toggle="tooltip" data-placement="left" title="New role code">Assign New Role</label>
                                    <i class="px-1 fa fa-user-plus text-secondary larger-icon" aria-hidden="true"></i>
                                </div>
                                <div class="form-input">
                                    <select class="form-control ml-2 form-select form-select-lg" aria-label="Default option is Standard User"
                      id="newRoleCode" name="newRole" style="background-color: palegoldenrod; font-weight: bold;">
                                    </select>
                                </div>
                            </div>

                         </div>
                     </div>
                 </div>

                 <div class="modal-footer px-3 pb-3">
                     <button type="button" id="updateUserRoleCancelBtn" class="btn btn-secondary rounded py-2 px-3 modal-button" data-dismiss="modal">Close</button>
                     <button type="submit" id="updateUserRoleSaveBtn" class="btn btn-primary rounded py-2 px-3 modal-button" value="" name="user_id" formaction="/usr/updateuserrole">Save</button>
                 </div>

             </div>
          </div>
      </form>
  </div>

  <script src="/javascripts/jquery.min.js"></script>
  <script src="/javascripts/bootstrap.min.js"></script>
  <script src="/javascripts/bootstrap-toggle.min.js"></script>

  <script>
    // Change user role in modal
  $('#updateUserRole').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget);
      var userId = button.data('userid');
      var currentRoleCode = button.data('currentrolecode');
      var roles = ['R', 'M', 'A'];

      var modal = $(this);
      modal.find(".currentUserId").val(userId);
      document.getElementById("updateUserRoleSaveBtn").value = userId;

      var roleName = getRoleName(currentRoleCode);
      modal.find(".currentRoleCode").val(roleName);

      var roleSelect = document.getElementById('newRoleCode');

      // Clear the <select> list so every visit doesn't append duplicate role codes
      if (roleSelect.length > 0) {
          for (var j = roleSelect.length - 1; j >= 0; j--) {
              roleSelect[j].remove();
          }
      }

      // Create the <option> entries for roles in the modal
      for (var i = 0; i < roles.length; i++) {
          var role = getRoleName(roles[i]);
          var opt = document.createElement('option');
          opt.innerHTML = role;
          opt.value = role;
          roleSelect.appendChild(opt);

          // Don't show role if user already that particular role
          if (currentRoleCode == roles[i]) {
              roleSelect[i].remove();
          }
      }
  });
</script>

该问题是Bootstrap Modal的典型问题，核心原因是Modal被嵌套在带有overflow: auto/scroll或position: relative属性的父容器中，导致Modal的定位基准变成了父容器而非整个页面视口。

修复步骤： #

1. 将Modal移至<body>标签最底部
   确保Modal没有嵌套在表格容器、滚动div等任何带有滚动或定位属性的父元素内，直接作为<body>的子元素：

   <body>
     <!-- 页面其他内容：导航、表格等 -->
     ...
   
     <!-- 放置Modal代码 -->
     <div class="modal fade modal-center" id="updateUserRole" tabIndex="-1" role="dialog" ...>
       <!-- Modal内容 -->
     </div>
   
     <!-- 脚本文件 -->
     <script src="/javascripts/jquery.min.js"></script>
     <script src="/javascripts/bootstrap.min.js"></script>
     ...
   </body>
   

2. 修正Modal的居中样式
   如果需要Modal垂直居中，替换或修正自定义的.modal-center类，使用符合视口基准的样式：

   .modal-center .modal-dialog {
     display: flex;
     align-items: center;
     min-height: calc(100vh - 1rem);
     margin: 0 auto;
   }
   

3. 修复遮罩层覆盖范围
   当前设置了data-backdrop="false"导致默认遮罩被禁用，若需要遮罩，移除该属性，或添加自定义遮罩样式确保覆盖整个视口：

   .modal-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0,0,0,.5);
   }
   

4. 可选：弹出时自动滚动到视口顶部
   若希望Modal弹出时页面自动滚动到可视区域顶部，在Modal的show.bs.modal事件中添加：

   $('#updateUserRole').on('show.bs.modal', function(event) {
     // 原有逻辑...
     $('html, body').animate({scrollTop: 0}, 'fast');
   });
   

内容的提问来源于stack exchange，提问作者VultureMF