Bootstrap4：主体放大的模态渲染问题

Question

I am trying to use a Bootstrap html page with body zoomed in at 90%.. The Bootstrap modal is showing spaces from right and bottom.. To show the issue i am putting a basic html page with modal at body 90% zoom.. 我正在尝试使用将主体放大90％的Bootstrap html页面。Bootstrap模态从右边和底部显示空格。为了显示此问题，我将基本html页面与modal 90％缩放。

When you click on the open modal you will see spaces from right and bottom for modal..How do we render modal with not extra spaces with body zoom 90%..Desired output is modal blur background should cover the whole screen.. and modal body should be in center of x axis as if zoom of 90% and 100% are same except the zoom 90% is small font 当您单击打开的模态时，您将在模态的右侧和底部看到空间。.如何使用主体缩放90％渲染模态而没有多余的空间。.所需的输出是模态模糊背景应覆盖整个屏幕..和模态主体应该位于x轴的中心，就像90％和100％的缩放比例一样，只是90％的缩放比例是小字体

<!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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="zoom:90%;">

<div class="container">
  <!-- 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-sm">
      <div class="modal-content">
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Answer 1

class .modal-backdrop is using 100vh & 100vw and since we applied 90% zoom, 100vh corresponds to 90% of the screen height; .modal-backdrop类使用100vh和100vw，并且由于我们应用了90％缩放，因此100vh对应于屏幕高度的90％； 100vw corresponds to 90% of the screen width; 100vw相当于屏幕宽度的90％；

solution : override this class with width: 100%; height: 100%; 解决方案 ：使用width: 100%; height: 100%;覆盖此类width: 100%; height: 100%; width: 100%; height: 100%;

 .modal-backdrop { width: 100% !important; height: 100% !important; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <body style="zoom:90%;"> <div class="container"> <h1> with zoom 90% </h1> <!-- 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-sm"> <div class="modal-content"> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body>

Bootstrap4：主体放大的模态渲染问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-05-05 03:49:00

Bootstrap4：主体放大的模态渲染问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-05-05 03:49:00

解决方案1
1 已采纳 2019-05-05 03:49:00