带滚动条的模态窗口

问题描述：

所以，我在一个网站中有一个模态窗口，我正在开发。带滚动条的模态窗口

该模式是由纯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

答

如果您有与实际模态的内容扩展了内格，您可以设置div的max-height要的东西 - 像75vh --and添加overflow-y: auto到容器中，它会自动添加一个滚动条的内容长于max-height。

HTML

<div class="Content"> 
    <p> 
    This is the page contents. 
    </p> 
</div> 

<div class="Modal" id="modal"> 
    <div class="Contents"> 
    <h1>Modal</h1> 
    <p id="text-area"> 
     [large amounts of content] 
    </p> 

    </div> 
</div>

CSS

body 
{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

.Content 
{ 
    position: relative; 
    width: 100%; 
} 

.Modal 
{ 
    position: fixed; 
    display: none; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.3); // light grey background 
} 
.Modal.Open 
{ 
    display: block; 
} 

.Modal .Contents 
{ 
    overflow-y: auto; 
    display: block; 
    position: relative; 
    width: 90%; 
    margin: 5% auto 0; 
    max-height: 90vh; 
    padding: 5px; 
    background: #fff; 
}

注意.Modal .Contents选择和它是如何工作。

的jsfiddle例子：https://jsfiddle.net/nj6r0sjw/

带滚动条的模态窗口

相关推荐