Estoy un poco corto de personal y he estado tratando de resolver un problema con un sitio web.
Estoy refactorizando un sitio que anteriormente usaba fancybox
para abrir la Política de privacidad (privacy.php) o los Términos y condiciones (terms.php) en lo que parecía ser un modal
o una overlay
. Idealmente, me gustaría activar un evento onclick
(o similar) en una etiqueta de anclaje, luego mostrar el contenido correspondiente de privacy.php
o terms.php
en el modal o la superposición. Simplemente quiero que se muestre sobre la página actual con un ancho de aproximadamente el 80%, para que los visitantes puedan leer los Términos y condiciones o la Política de privacidad sin salir de la página o iniciar un evento emergente o window.open
.
Mis disculpas por no incluir el código. Principalmente intento encontrar los recursos adecuados para comenzar.
Puede crear un iframe
absolutamente posicionado con un índice z positivo (más alto que cualquier otro índice z en su página), estableciendo la fuente del marco en su página de privacy.php
.
Código aproximado:
const iframe = document.createElement("iframe"); iframe.src = "privacy.php"; iframe.className = "privacy-overlay"; document.body.appendChild(iframe);
...con este CSS:
.privacy-overlay { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; }
...o similar.
O puede envolverlo en un div
con un botón para eliminarlo:
const div = document.createElement("div"); const closeButton = document.createElement("button"); closeButton.textContent = "Close"; div.appendChild(closeButton); const iframe = document.createElement("iframe"); iframe.src = "privacy.php"; div.appendChild(iframe); div.className = "privacy-overlay"; document.body.appendChild(div); button.addEventListener("click", () => { document.body.removeChild(div); });
...con un estilo CSS adecuado para organizar los elementos dentro del div.