Responsive Ad Area

Share This Post

test

How to overflow one section of a modal window using CSS

I’ve created a modal window with 2 sections: a header and a ul. I use jQuery to open the modal. So far so good. My problem is to make the ul fit the modal box without overflowing.

I can overflow the .modal. But, i really just to want to overflow the ul, not the entire .modal box.

https://jsfiddle.net/tjL1e0ca/

this is the html

<h3>click here to open modal</h3>

<div class="modal">
  <div class="modal_1">
    <div>
      <h1>HEADER GOES HERE</h1>
      <h2>SUB GOES HERE</h2>
    </div>
    <ul>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
    </ul>
  </div>
</div

and css

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  max-width: 650px;
  max-height: calc(100% - 60px);
  padding: 30px 20px 20px;
  /*overflow: auto;*/
  border: 3px solid black;
  background-color: #ccc;
}

.modal_1 ul {
  background-color: red;
  margin-top: 20px;
}

and jquery

$(document).on("click", "h3", function(e) {
  $(".modal").css("display", "block");
})


How to overflow one section of a modal window using CSS
How to overflow one section of a modal window using CSS
test
{$excerpt:n}

Share This Post

Leave a Reply

Your email address will not be Publishedd. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Skip to toolbar