Modal/Popup HTML e JS com abertura automática

<!-- MODAL -->
<div id="overlay" onclick="closeModal()">
    <div id="modal" onclick="event.stopPropagation();">
        <span class="modal-close" onclick="closeModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
        <div id="modal-content">
            <img style="height: 90vh;" src="ADD_IMG_HERE" alt="">
        </div>
    </div>
</div>

<style>  
  #overlay {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
  }
  
  #modal {
      display: none;
      position: relative;
      z-index: 99;
  }
  
  .modal-close {
      cursor: pointer;
      position: absolute;
      top: 180px;
      right: 10px;
      font-size: 20px;
      color: #555;
  }

  #modal-content h4 {
      margin-top: 0;
      font-size: 32px;
      margin-bottom: 24px;
  }

  #modal-content p {
      font-size: 18px;
      line-height: 1.4em;
  }

  .modal-close {
      background: #f60000;
      padding: 8px;
      border-radius: 8px;
      color: #fff;
      display: flex;
  }

  .modal-close:hover {
      background: #b60000;
      transform: scale(1.2);
      transition: all linear 0.2s;
  }
</style>

<script>
    function openModal() {
        document.getElementById("overlay").style.display = "flex";
        document.getElementById("modal").style.display = "block";
    }

    function closeModal() {
        document.getElementById("overlay").style.display = "none";
        document.getElementById("modal").style.display = "none";
    }

    document.addEventListener("DOMContentLoaded", function() {
        openModal();
    });
</script>