javascript - 为移动设备调整页面大小时，Bootstrap 模态会向下移动页面

Question

我的页面上有一个弹出窗口，可在点击时弹出。它完美地居中于浏览器 View 和较小的 View 中。在我将页面缩小到手机的那一刻，模态下降到页面下方，我必须滚动才能看到它。我该如何解决这个问题？

.nx-modal {
position: absolute;
padding: 20px;
background-color: #fff;
border-radius: 15px;
z-index: 1050;
width: 96%;

<div class="page-container">
<div class="container">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- ko if: currentDialog() !== null -->
            <div class="modal-backdrop fade in"></div>
            <div id="Modal" class="nx-modal" data-bind="dsfsdfsdf"}" style="display: none;">
                @* This is where dialog's content is loaded *@
            </div>
            <!-- /ko -->
        </div>
    </div>
</div>

Answer 1

是否有任何其他样式分配给模态覆盖？例如媒体查询？您可以尝试为较小的屏幕添加媒体查询，并为您的模式提供 top:0px 和 left:0px 在这种情况下可能会有所帮助..

试试这个

 @media only screen and (max-width : 768px) {
 .modal {
  position: fixed;
  top: 0;
  margin:0;
  padding:10px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  width: 96%;
  }
}