Question

我想显示一个模态对话框，但是我在灵活布局和具有固定位置的对话框的组合中苦苦挣扎。页眉和页脚的高度必须固定；内容部分的滚动条溢出。之所以选择此处的flex布局，是因为标头可以隐藏或改变高度，在这种情况下，我希望内容占据所有可用的高度。

但是会发生什么，如果我有一个带有position：relative（md-modal）的模态对话框，则一切正常。

一旦我更改位置：固定在md-modal上，一切都会中断。我没有看到造成这种情况的根本原因。我在这里遇到规格问题吗？

我将情况封装在600/400包装器中只是为了提高可见度。

<html>
<head>
<style type="text/css">
html,
body {
  height: 100%;
  margin: 0
}

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    border:1px solid green;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

}
.md-show {
    visibility: visible;
}
.md-content {
    position: relative;
    color: #000;
    background: #fff;
    border-radius: 3px;
    margin: 0 auto;
}
.md-effect-1 .md-content {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
  overflow-y:auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
</style>
</head>
<body>
<a href="javascript:document.getElementById('dialog').classList.add('md-show')">test</a>

<div style="width:600px;height:400px">
<div class="md-modal md-effect-1 center" id="dialog">
    <div class="md-content">
        <div class="box">
          <div class="row header">
            <p><b>header</b>
              <br />
              <br />(sized to content)</p>
          </div>
          <div class="row content">
            <p>
              <b>content</b><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
              <p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
              (fills remaining space)
            </p>
          </div>
          <div class="row footer">
            <p><b>footer</b> (fixed height)</p>
          </div>
        </div>
    </div>
</div>
</div>

</body>
</html>

Answer 1

position:fixed，就像position:absolute从文档流中删除元素一样。就其父级而言，它几乎不存在。

这意味着它在与文档流中的元素相同的空间上呈现。

absolute和fixed之间的区别在于，绝对定位的元素是相对于其最接近的父对象定位和大小的，而fixed的元素是相对于其最接近的视口的位置和大小的

这意味着您想要：在模式容器上使用position:fixed，该容器应该具有视口的大小。该容器是不可见的（透明），并且包含实际的模式。您可以使用选择的居中技术，但我建议使用

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

我强烈建议您不要使用绝对居中方法，例如transform: translate(-50%, -50%)，因为当模式导致其高度大于视口（您无法访问顶部）时，它们会惨败。

也就是说，这是一个非常基本的模态示例：

document.querySelector('#showModal').addEventListener('click', function(){
  document.querySelector('.modal-container').classList.add('open');
})
document.querySelector('#hideModal').addEventListener('click', function(e){
  e.preventDefault();
  document.querySelector('.modal-container').classList.remove('open');
})

.modal-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal-background {
  background-color: rgba(0,0,0,.42);
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.modal {
  position: relative;
  background-color: white;
  display: flex;
  width: 900px;
  min-height: 80vh;
  flex-direction: column;
}
#hideModal {
  position: absolute;
  top: 1em;
  right: 1em;
}
.open.modal-container {
  display: flex;
}
.modal > * {
  flex-grow: 0;
  padding: 0 1rem;
}
.modal-body {
  flex-grow: 1;
}
.modal-head, .modal-footer {
  background-color: #eee;
}
.modal-footer {
  padding: 1rem;
}
@media (max-width: 1200px) {
  .modal {
     width: 600px;
  }
}
@media (max-width: 767px) {
  .modal {
     width: 90vw;
  }
}

<div class="modal-container">
  <div class="modal-background"></div>
  <div class="modal">
    <a id="hideModal" href>Hide modal</a>
    <div class="modal-head">
      
      <h1>Modal title</h1>
    </div>
    <div class="modal-body">
      This is the modal body
    </div>
    <div class="modal-footer">
      This is the modal footer
    </div>
  </div>
</div>

<button id="showModal">Show modal</button>

大多数人选择使用经过全面测试的模态插件。而且，大多数流行的框架都带有已经定义的，可以使用的自己的模式。

当然，构建自己的游戏可以完全自由地打开和关闭动画及其任何可重用功能。

以下是您的标记的快速修复：

html,
body {
  height: 100%;
  margin: 0
}

.md-modal {
  position: fixed;
  min-height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  border: 1px solid green;
  z-index: 0;
  visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: rgba(0,0,0,.35);
  height: 100%;
  overflow: auto;
}

.md-show {
  visibility: visible;
}

.md-content {
  color: #000;
  background: #fff;
  border-radius: 3px;
  margin: 5vw auto;
  width: 90vw;
  min-height: calc(100vh - 10vw);
  display: flex;
}

.md-content>* {
  flex-grow: 0;
  flex-shrink: 0;
}

.md-effect-1 .md-content {
  transform: scale(0.7);
  opacity: 0.2;
  transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
  transform: scale(1);
  opacity: 1;
}

.box {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 0 auto;
}

.box .row.content {
  flex: 0 1 auto;
  overflow-y: auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

.md-content .box .content {
  flex-grow: 1;
}

<a href="javascript:document.getElementById('dialog').classList.add('md-show')">test</a>

<div class="md-modal md-effect-1 center" id="dialog">
  <div class="md-content">
    <div class="box">
      <div class="row header">
        <p><b>header</b>
          <br />
          <br />(sized to content)</p>
      </div>
      <div class="row content">
        <p>
          <b>content</b>
          <p>line</p>
          <p>line</p>
          <p>line</p>
          <p>line</p>
          <p>line</p>
          <p>line</p>
          (fills remaining space)
      </div>
      <div class="row footer">
        <p><b>footer</b> (fixed height)</p>
      </div>
    </div>
  </div>
</div>

将flex与位置结合：固定

1 个答案: