<div class="overlay"></div>
<button class="myBtn" data-modal="myModal2" >Open Modal</button>
<div id="myModal2" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close close2" data-modal="myModal2">&times;</span>
     
    </div>
    <div class="modal-body">
       textвапвапвап
    </div>
  </div>
</div>

<button class="myBtn" data-modal="myModal1" >Open Modal</button>
<div id="myModal1" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close close1" data-modal="myModal1">&times;</span>
     
    </div>
    <div class="modal-body">
       <p>text</p>
    </div>
  </div>
</div>

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100000; /* Sit on top */
    padding-top: 172px; /* 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: 684px;
    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 {
    margin-top: -11px;
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

let openButtons = document.getElementsByClassName('myBtn'),
    closeButtons = document.getElementsByClassName('close'),
    overlay = document.getElementsByClassName('overlay'),
    modal = document.getElementsByClassName('modal');
        

for (let i = 0; i < openButtons.length; i++) {
  openButtons[i].onclick = openModal;
}

function openModal(event) {
  let id = this.getAttribute('data-modal');
  let modal = document.getElementById(id);
  modal.style.display = 'block';
  overlay[0].classList.add("active");
}

function closeModal(event) {
  /**
   * исключим кнопки открытия модалки
   * и содержимое внутри .modal-body, т.е. контент модалки
   */
  if (!event.target.classList.contains('myBtn') && !event.target.closest('.modal-body')) {
    for (let i = 0; i < modal.length; i++) {
      modal[i].style.display = 'none';
      overlay[0].classList.remove('active'); 
    }
  }
}

document.body.addEventListener('click', closeModal);