帶滾動條的模態窗口

所以，我在一個網站中有一個模態窗口，我正在開發。帶滾動條的模態窗口

該模式是由純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上。我怎樣才能做到這一點？

謝謝。

來源

2016-01-13 rui404

嘗試的模式/模式的內容設置'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/

來源

2016-01-13 18:29:03 Aeolingamenfel

帶滾動條的模態窗口

回答

相關問題