CODEWITHSUNDEEP
htmlcssmodal-dialog
ccruz
ccruz

Reputation: 87

Modal Scroll/Overflow Issue

I'm using this modal from www.w3schools as the base for the modal I'm building for my portfolio page: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

The modal is to display a long body of text showing off my projects. The issue I'm running into with the modal now is that it won't apply a scroll to the modal when there's excess information. I tried changing the overflow in the CSS to overflow-y however it had the same result, I tried adjusting the height of the modal from 100% to a set size but then it destroyed the backdrop on the modal and didn't even apply the scroll from the overflow. Would anyone know how to resolve this issue? Thank you in advance to whomever is able to help me.

jsfiddle: https://jsfiddle.net/5qv807b2/3/

HTML:

Animated Modal with Header and Footer

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>END</p>
      <p>END</p>

    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

CSS:

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

Script:

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Upvotes: 0

Views: 1496

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39382

You need to set following css on .modal-body:

.modal-body {
  max-height: 50vh;  /* Change this value according to your needs */
  overflow: auto;
}

Note: please see the demo in full page mode.

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 40px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {
  padding: 2px 16px;
  max-height: 50vh;
  overflow: auto;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
<h2>Animated Modal with Header and Footer</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
      <p>END</p>
      <p>END</p>

    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

Upvotes: 3

Related Questions