我想显示一个模式对话框，但我正在努力将弹性布局与固定位置的对话框结合起来。页眉和页脚需要固定高度；内容部分有滚动条溢出。我在这里选择弹性布局的原因是标题可以隐藏或高度变化，在这种情况下我希望内容占据所有可用的高度。
但是，如果我有一个带有位置的模态对话框：相对（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>
position:fixed，就像从文档流中position:absolute取出元素一样。就其父级而言，它几乎就像不存在一样。
这意味着它在与文档流中的元素相同的空间上呈现。
absolute和之间的区别在于fixed，绝对定位元素相对于其最接近的定位父级进行定位和调整大小，而fixed绝对定位元素则相对于其最近的视口进行定位和调整大小。
这意味着您想要：position:fixed在模态容器上使用，该容器应该具有视口的大小。该容器是不可见的（透明的）并且包含实际的模态。您可以使用选择的居中技术，但我建议使用
.modal-container {
display: flex;
align-items: center;
justify-content: center;
}
我强烈建议不要使用绝对居中方法，例如transform: translate(-50%, -50%)，因为当模态结果高于视口时，它们会严重失败（您将失去访问顶部的能力）。
也就是说，这是一个非常基本的模态示例：
.modal-container {
display: flex;
align-items: center;
justify-content: center;
}
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;
}| 归档时间： |
|
| 查看次数： |
6956 次 |
| 最近记录： |