Question

我正在使用父div内的打开按钮设置弹出模式，但是当它打开时，它包含在div中，并且我希望它在所有div上打开。

我尝试将z-index设置为高于父div，但似乎没有什么不同。我怀疑这与父div的放置有关，父div的位置在其父div的绝对中间和中心。如果我从div中删除模态，它将按我的需要全屏显示。

<div id="parent1" style="position:relative;height:100%;z-index:1;">
  <div id="parent2" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:100%;z-index:2;">
    (modal, which is set to z-index:3)
  </div>
</div>

Answer 1

您已将absolute div包裹在位置relative div中。这就是为什么它在里面。下面的代码段将告诉您relative和absolute定位如何一起工作。

  .top {
  top: 50px;
  height: 100%;
  position: relative;
}

.relative {
  background: #dfdfdf;
  ) body {
    height: 100%;
  }
  .absolute {
    position: absolute;
    bottom: 0;
  }

<div class="relative top">
  <div class="absolute bottom">hey there</div>
</div>

div应该一直向下，但是不会，因为它是由相对的div包裹的，如果删除相对类，则div会掉落。
对于覆盖整个页面的模式，请在任何fixed div之外使用位置absolute或relative，或者甚至更好->将flexbox用于“非常敏感”模式

document.getElementById('modal-Opener').onclick = function() {
  document.querySelector('.modal').classList.add("modalOpen");
}

body,
html {
  height: 100%
}

.modal {
  border-radius: 20px;
  height: 100px;
  background-color: #dfdfdf;
  width: 60%;
  color: #000;
  padding: 20px;
  display: none;
  position: relative;
  justify-content: center;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s align-items:center;
}

.modalOpen {
  display: flex;
}

.flex {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

<button id="modal-Opener">Open modal</button>
<div class='flex'>
  <div class='modal'>I am a modal</div>
</div>

Answer 2

如果我理解正确，则需要以下条件：

链接以在页面上垂直和水平居中打开模式（仅占用其垂直和水平所需的空间）
模式以在整个页面上全屏显示（垂直和水平方向占用所有空间）

如果正确，那么您需要：

父div包含打开模式的链接，但不包含模式本身
已设置为固定的模式div，因此无论其位于哪个div中，它都适用于视口（可见屏幕）

CSS提示和技巧：

display:flex是将内容水平和/或垂直居中的最简单，最可靠的方法（除非您需要支持旧版浏览器）
position:fixed应用于视口（可见屏幕区域），无论元素在页面流中的什么位置，因此您都可以将模式div放置在任意位置
position:absolute将元素限制为其父元素，因此您需要将模式div放置为body或#parent1的子元素（取决于“全屏”的含义）），而不是#parent2
z-index。如果您可以更改元素的顺序，那是更安全的方法。如果在整个文档中使用了过多的文档，z-index可能会变得难以跟踪和调试。

下面的示例使用彩色边框更好地可视化div的空间位置。单击按钮以显示模态。单击模态以关闭模态。

//using jquery for convenience; can be done with javascript or css only instead
$(document).ready(function() {
  let modal = $('#modal');

  //show modal
  $('#link_to_modal').on('click', function() {
    modal.css('display', 'block');
  });

  //hide modal
  modal.on('click', function() {
    modal.css('display', 'none');
  });
});

#parent1 {
  position: relative;
  height: 300px; /* 100% for actual, 300px for testing */
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

#parent2 {
  border: 1px solid red;
}

#modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid green;
  background-color: white;
  display: none;
  overflow-y: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent1">
  <div id="parent2">
    <button id="link_to_modal" type="button">Open Modal</button>
    <div id="modal">Modal in full screen</div>
  </div>
</div>

如何使模式在其父div外部打开

2 个答案: