模态框遮罩层与datetimepicker下拉框滚动冲突问题解决

我懂你碰到的这个麻烦事儿：打开fixed定位的Modal后，展开的daterangepicker会跟着页面滚动乱跑，可你又必须保留.modal { position:fixed; }来保证遮罩层全屏覆盖。这就给daterangepicker的定位带来了冲突，不过咱们有办法解决。

问题出在哪？ #

默认情况下，daterangepicker是用position: absolute相对于触发它的输入框来定位的，但它的定位基准是整个文档。当页面滚动时，Modal因为是fixed定位不会动，可daterangepicker还是跟着文档滚动走，自然就偏移了。咱们得把它的定位上下文改成Modal内部，让它跟着Modal走。

具体解决方案 #

咱们从两个方面入手：修改daterangepicker的初始化配置，再补点CSS样式就能搞定。

1. 调整JavaScript代码（关键是设置父元素）

在初始化daterangepicker的时候，加上parentEl选项，把它挂载到Modal的内容容器里，这样它就会继承Modal的定位上下文了。另外，关闭Modal的时候记得销毁daterangepicker实例，避免残留问题。

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
  // 关闭Modal时销毁daterangepicker，避免重复实例
  $('input[name="datetimes"]').daterangepicker('remove');
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    $('input[name="datetimes"]').daterangepicker('remove');
  }
}

$(function() {
  $('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    startDate: moment().startOf('hour'),
    endDate: moment().startOf('hour').add(32, 'hour'),
    locale: {
      format: 'M/DD hh:mm A'
    },
    // 核心配置：让daterangepicker挂载到Modal内容容器内
    parentEl: '.modal-content'
  });
});

2. 补充CSS样式

给Modal内容容器设置相对定位，作为daterangepicker的定位基准，再调整daterangepicker的定位属性，确保它在Modal上方显示：

/* 让Modal内容容器成为定位基准 */
.modal-content {
  position: relative;
}

/* 修改daterangepicker的定位，相对于modal-content */
.daterangepicker {
  position: absolute !important;
  z-index: 9999 !important; /* 确保在Modal内容上方，不会被遮罩 */
}

/* 你的原有Modal样式保持不变 */
.modal {
  display: none;
  position:fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0px;
  top: 0px;
  width: 100%;
  max-height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background: linear-gradient(-45deg, #89f7fe 0%, #66a6ff 60%, #23A6D5, #23D5AB);
  margin:auto;
  padding: 20px;
  border: 1px solid #888;
  width: 600px;
  height: 600px;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.daterangepicker select {
  display: inline-block;
}

HTML部分（无需修改）

你的原有HTML结构保持原样就行，不需要调整。

为啥这么改管用？ #

• 把daterangepicker的父元素设为.modal-content后，它的DOM会被插入到Modal内部，而.modal-content是相对定位，所以daterangepicker的绝对定位就会以这个容器为基准，不再跟着整个文档滚动。
• Modal本身是fixed定位，不管页面怎么滚，它的位置都不动，daterangepicker自然也就固定在输入框旁边了。
• 关闭Modal时销毁实例，是为了防止多次打开Modal生成多个daterangepicker，导致定位混乱或者样式冲突。

这样调整之后，你就能实现滚动页面时daterangepicker纹丝不动，同时Modal的全屏遮罩效果也完全保留啦。

内容的提问来源于stack exchange，提问作者rengineer