用于模式的css -如何将其放置在页面上方但可在窗口中滚动
以下是html：
<body>
<div class="ngdialog">
<div class="ngdialog-overlay></div>
<div class="ngdialog-content>
...modal content
</div.
</div>
<body>正如您所猜测的，is对话框div是一个模式(z-index: 10000)。我的目标是，运用一些组合风格(位置，浮子等)。使之成为这样：
当显示模式时，有覆盖(灰色和不透明度；0.5)覆盖页面中的所有其他元素。
( b)如果模态内容比页面长，我希望用户能够使用主滚动条查看模态的底部/顶部。换句话说，如果页面的其余部分只有100 of，但模式是200 of，我想要使用scoll条来允许用户滚动额外的100 of。
我遇到的问题是，当我将no对话框定位为绝对值时，窗口将不允许我滚动以查看模态的其余部分(因为绝对元素不再在标准元素流中)。
如果我尝试使用固定定位，就没有滚动条。如果我使用相对定位，其他页面元素(覆盖在上面)会被移动。
我尝试过(感觉上)所有这些元素的绝对，相对，固定，静态，浮动的每一个组合，我无法得到我想要的行为。
记住身体是相对的(如果需要的话可以改变)。
谢谢你，谢谢你的评论。
编辑:对不起，我不得不在那里睡觉，这里有一把小提琴：
回答 3
Stack Overflow用户
发布于 2015-04-16 06:52:49
WIthout更改您的HTML结构，这是您需要做的：
* {
/* This was to save typing */
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
min-height: 100%;
}
.ngdialog {
z-index: 10000;
text-align: center;
overflow: hidden;
}
.ngdialog-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(0,0,0, .4);
}
.ngdialog-content {
position: absolute;
z-index: 10000;
width: 100%;
height: 100%;
max-height: 100%;
overflow: auto;
}
.panel {
margin-top: 50px;
margin-left: 10%;
margin-right: 10%;
min-height: 500px;
z-index: 10000;
}
.reg-page-block {
width: 200px;
height: 200px;
display: inline-block;
background-color: #0f0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ^ from your provided fiddle -->
<body>
<div class="ngdialog">
<div class="ngdialog-overlay"></div>
<div class="ngdialog-content">
<div class="panel panel-primary">
<div class="panel-heading">modal</div>
<div class="panel-body">content</div>
</div>
</div>
</div>
<div class="reg-page-block">Regular Page</div>
</body>
请注意，如果对话框和内容都比viewport高，您将得到双滚动条--这可能不可取，但您特别要求对话框与内容分开滚动。
Stack Overflow用户
发布于 2015-04-15 19:58:50
尝试一些这种CSS，看看它是否能起作用。如果不看到当前的CSS代码，很难提供精确的解决方案，但这可能会奏效。
使用此HTML结构代替：
<div class="ngdialog-overlay">
<div class="ngdialog-content">CONTENT HERE</div>
</div>这个CSS代码：
.ngdialog-overlay {
display:block;
width:100%;
height:100%;
background:#333333;
background:rgba(0,0,0,0.8);
z-index:10000;
position:fixed;
top:0;
left:0;
overflow: scroll;
}
.ngdialog-content{
text-align: center;
width:100%;
height:100%;
padding-top:30px;
padding-bottom:30px;
/* Optional if you want content vertically centered */
display:table-cell;
vertical-align: middle;
}诀窍是overflow:scroll;和高度:100%；--因为我们有一个设置的高度，如果内容变得更高，它们就会溢出并滚动。但是在这种情况下，当用户试图滚动时，它实际上是在滚动.ngdialog-overlay元素，而不是窗口本身。
Stack Overflow用户
发布于 2022-07-13 06:09:08
在CSS文件中添加以下行
.modal-dialog {
transform: translateY(50%)!important;
}您可以将50%更改为任何其他值，这将解决浏览器中的问题，它为我工作。
https://stackoverflow.com/questions/29664622
复制相似问题
腾讯云开发者
