HTML / CSS - custom modal with overflowing content-CodePudding

I am building a modal for my React project. Initially, I was using the SweetAlert library but it was messing with the way React is supposed to work. I'm not going to go into the details about that since it's irrelevant to this post. So I ended up building my own modal.

What I have so far:

.modal {
  left: 50%;
  transform: translate(-50%);
  height: 100% width: 90%;
  position: absolute;
  background: #212121;
  padding: 2rem;
  z-index: 10;
  border-radius: 10px;
  color: white;
  top: 1rem;
}

.modalContent {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

<div >
  <span>&times;</span>
  <div >
  </div>
</div>

What I want to accomplish is to move the content scrollbar outside to the scroll-track and hide the page scrollbar. The reason I am using overflow on the content rather than on the modal itself is that the close button needs to always remain visible even when scrolling the content.

CodePudding user response：

Use a screen size wrapper div without background-color and give it a scroll of auto in y direction leave the modal closing button to the inner visible div


<div >
<div class"visible_modal with_with background color">
    <span>&times;</span>
    <div >
    </div>
<div>
</div>

CodePudding user response：

// 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";
  }
}

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* 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;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h2>Animated Modal with Header and Footer</h2>

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

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

    <!-- Modal content -->
    <div >
      <div >
        <span >&times;</span>
        <h2>Modal Header</h2>
      </div>
      <div >
        <p>Some text in the Modal Body</p>
        <p>Some other text...</p>
      </div>
      <div >
        <h3>Modal Footer</h3>
      </div>
    </div>

  </div>
</body>

</html>