Question

我点击时会在我的页面上弹出一个模态。它完全集中在浏览器视图和较小的视图中。目前我将页面缩小为手机，模态下到页面，我必须滚动才能看到它。我该如何解决这个问题？

.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%;
  }
}

调整移动页面大小时，Bootstrap模式向下移动页面

1 个答案: