Simple Modal WordPress

simple_modal_WP.php

<?php
// functions.php
add_action('wp_footer', function() { ?>
  <div id="simple-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
    <div style="background:#fff; padding:20px; border-radius:10px; max-width:400px; text-align:center; position:relative;">
      <span id="close-modal" style="position:absolute; top:10px; right:15px; cursor:pointer; font-size:20px;">&times;</span>
      <h2>Hola 👋</h2>
      <p>Este es un modal simple en WordPress.</p>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const modal = document.getElementById("simple-modal");
      const close = document.getElementById("close-modal");

      // Mostrar el modal automáticamente después de 1s
      setTimeout(() => { modal.style.display = "flex"; }, 1000);

      // Cerrar al hacer click en la X
      close.onclick = () => modal.style.display = "none";

      // Cerrar si se hace click fuera del contenido
      window.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
    });
  </script>
<?php });