document.addEventListener("DOMContentLoaded", function() { // Crea el contenedor del modal var modal = document.createElement("div"); modal.id = "welcomeModal"; modal.style.position = "fixed"; modal.style.zIndex = "9999"; modal.style.left = "0"; modal.style.top = "0"; modal.style.width = "100%"; modal.style.height = "100%"; modal.style.overflow = "auto"; modal.style.backgroundColor = "rgba(0,0,0,0.4)"; // Crea el contenedor del contenido del modal var modalContent = document.createElement("div"); modalContent.style.backgroundColor = "#fff"; modalContent.style.margin = "15% auto"; modalContent.style.padding = "20px"; modalContent.style.border = "1px solid #ccc"; modalContent.style.width = "80%"; modalContent.style.maxWidth = "400px"; modalContent.style.textAlign = "center"; modalContent.style.borderRadius = "10px"; // Crea el botón para cerrar el modal var closeBtn = document.createElement("span"); closeBtn.innerHTML = "×"; closeBtn.style.color = "#aaa"; closeBtn.style.float = "right"; closeBtn.style.fontSize = "28px"; closeBtn.style.fontWeight = "bold"; closeBtn.style.cursor = "pointer"; closeBtn.addEventListener("click", function() { modal.style.display = "none"; }); modalContent.appendChild(closeBtn); // Crea el elemento de mensaje de bienvenida var greetingElem = document.createElement("p"); greetingElem.id = "greetingText"; greetingElem.style.fontSize = "18px"; greetingElem.style.fontWeight = "bold"; modalContent.appendChild(greetingElem); // Añade el contenido al contenedor del modal modal.appendChild(modalContent); document.body.appendChild(modal); // Determina el saludo basado en la hora var hour = new Date().getHours(); var greeting = ""; if (hour < 12) { greeting = "¡Buenos días!"; } else if (hour < 18) { greeting = "¡Buenas tardes!"; } else { greeting = "¡Buenas noches!"; } greetingElem.textContent = greeting + " Bienvenido a nuestro catálogo digital."; // Muestra el modal modal.style.display = "block"; // Cierra el modal si se hace clic fuera del contenido window.addEventListener("click", function(event) { if (event.target === modal) { modal.style.display = "none"; } }); });