Question

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

延迟5秒
这是一个表格
当用户向下滚动时（由于5秒延迟），它会弹出
如果用户向下滚动屏幕，它具有固定位置，以便显示在屏幕中央。

它在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变得可滚动。

无论如何，谢谢大家！

固定的弹出式div由键盘重叠

1 个答案: