带滚动条的模态窗口

Question

So, I have a modal window in a website that I'm devloping.

The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.

CSS of the modal:

<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>

So the problem is when I have a something that displays too much information on the modal, this happens:

So I think I need a scroll bar on the div inside the modal. How can I do that?

Thank you.

Answer 1

If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh --and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set 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;
}

Note the .Modal .Contents selector and how it works.

JSFiddle Example: https://jsfiddle.net/nj6r0sjw/