Модальное окно с полосой прокрутки

Итак, у меня есть модальное окно на веб-сайте, который я разрабатываю.Модальное окно с полосой прокрутки

Модаль сделан из чистого 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

Попробуйте установить 'Макс-height' на модальной/модального содержания (например,' 75vh', или что-то делает больше смысла для вашего проекта), и добавление 'переполнение-у : auto; ', который добавит полосу прокрутки, когда контент будет больше, чем установленный' max-height'. – Aeolingamenfel

Я пробовал, но он не работает. Пробовал это, прежде чем делать это сообщение. StackOverflow - моя последняя надежда xD – rui404

Можете ли вы объяснить, что вы имеете в виду, не работает? Я попытаюсь воспроизвести то, что вы делаете в скрипке ... – Aeolingamenfel

Если у вас есть внутренний DIV, расширяющийся с содержанием фактического модального, вы можете установить max-height этого DIV быть что-то - как 75vh -й добавить 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

Модальное окно с полосой прокрутки

ответ

Смежные вопросы