当移动页面大小时，引导模式向下移动页面

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