html - 固定弹出 div 被键盘重叠

Question

我已经搜索了很多可能的解决方案，但我似乎无法解决这个问题。我有一个具有以下特征的弹出式 div:

1. 延迟5秒
2. 这是一个表格
3. 它会在用户向下滚动时弹出(因为有 5 秒的延迟)
4. 它具有固定位置，以便在用户向下滚动屏幕时显示在屏幕中央。

它在 PC 和笔记本电脑上运行良好，我的问题是移动设备。

当弹出窗口出现时，是的，在屏幕中间，当我点击表单的任何字段时，键盘出现，与表单重叠使其无法使用。

我正在寻找以下任一解决方案:1. 一旦键盘出现，就能够滚动浏览这个固定的 div。2. 将固定位置更改为绝对位置，但要确保弹出窗口出现在可见屏幕的中间。 (因为当它设置为绝对时，它会出现在页面顶部而不是用户所在的位置)

编辑:感谢您的回答!好的，这是完整的 HTML 和 CSS:

HTML:

<!-- Pop Up -->
      <div id="boxes" class="boxes">
       <div id="dialog" class="window">             
          <form>
             <p><input type="text" placeholder="Your Name" name="name" id="name"></p>
             <p><input type="text" placeholder="Your mail" name="email" id="email"></p>
             <p><textarea rows="10" name="msg" placeholder="Your msg" id="msg"></textarea></p>
             <p style="float:right; ">                
                <input class="btn btn-danger btn-large" type="submit" value="Enviar">
             </p>
          </form>
          <span class="loading"></span> 
       </div>
       <div id="mask"></div>
    </div>

CSS:

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#0c0c0c;
  display:none;
}
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  /*padding:20px;*/
  border-radius: 15px;
  border: ;
  text-align: center;
}
#boxes #dialog {
  /*width:100%;*/
  height:auto;
  padding:10px;
  background-color:#fdfdfd;
  font-family:'Open Sans Condensed', sans-serif;
  font-size: 15pt;
  position: fixed;
  top: 50%;
  left: 551.5px;
  display: none;
  color: black;
  width: 500px;
}    

@media (max-width: 767px) {
  #boxes #dialog {
    width: calc(100% - 60px);
  }
}

Answer 1

好吧，我终于解决了这个问题，这个解决方案是一年前发布的:Fixed position div scrollable )

我认为这个问题无论如何都应该留在这里，因为对于所有遇到移动键盘问题的人来说，这可能是一个很好的解决方案。

我遇到的问题只发生在移动设备上，所以有一个可滚动的固定 div(所以它总是出现在可见屏幕的中心)的解决方案是:

@media (max-width: 767px) {
  #boxes #dialog {
    width: calc(100% - 60px); /*centers the pop up horizontally*/  
    top: 10px;
    left: 35px !important; /*this is just to fix a small gap, not really necessary*/
    bottom: 10px;    
    overflow-y: auto;
    max-height: 100%;
  }
}

这绝对解决了问题。所以弹出窗口现在总是出现在可见屏幕的中央。当弹出键盘时，div 将变为可滚动的。

谢谢大家!