JavaScript模态

Question

我是JavaScript的初学者，我有一个简单的模态，但如果我想要2或3个不同的模态呢？我打算将它用作图库预览。这就是我所拥有的：

var modal = document.getElementById('simpleModal');

var modalBtn = document.getElementById('modalBtn');

var closeBtn = document.getElementsByClassName('closeBtn')[0];

modalBtn.addEventListener('click', openModal);

closeBtn.addEventListener('click', closeModal);

window.addEventListener('click', outsideClick);

function openModal(){
  modal.style.display = 'block';
}

function closeModal(){
  modal.style.display = 'none';
}

function outsideClick(e){
  if(e.target == modal){
    modal.style.display = 'none';
  }
}

  <button id="modalBtn" class="button">Click Here</button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
            <span class="closeBtn">&times;</span>
            <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
          <p>Hello...I am a modal</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla repellendus nisi, sunt consectetur ipsa velit repudiandae aperiam modi quisquam nihil nam asperiores doloremque mollitia dolor deleniti quibusdam nemo commodi ab.</p>
        </div>
        <div class="modal-footer">
          <h3>Modal Footer</h3>
        </div>
      </div>
    </div>
</body>
  <script src="main.js"></script>
</html>