0
所以,我在一个网站中有一个模态窗口,我正在开发。带滚动条的模态窗口
该模式是由纯CSS制成的,打开它并关闭它我有javascript的功能,改变CSS的元素,使模式显示/隐藏。
CSS模态的:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
所以,问题是,当我有一个东西,显示的模态信息太多,出现这种情况:
所以我想我需要一个滚动条在模态内的div上。我怎样才能做到这一点?
谢谢。
尝试的模式/模式的内容设置'MAX-height'(如'75vh',或任何让最适合您的项目),并添加一个'溢出-Y :auto;'当内容变得比设置的'max-height'长时,它将添加一个滚动条。 – Aeolingamenfel
我试过了,但不起作用。尝试之前做这个职位。 StackOverflow是我最后的希望xD – rui404
你能解释一下你的意思吗?我会尝试复制你在小提琴中所做的... – Aeolingamenfel