<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- dimensiones del anuncio -->
<meta name="ad.size" content="width=300,height=250">
<title>Form Dialog</title>
<!-- Definición del clickTag -->
<script type="text/javascript">
var clickTag = "https://uclahs.az1.qualtrics.com/jfe/form/SV_beXtHliSrdJr2Ki?Q_Language=ES-ES";
</script>
</head>
<body>
<!-- clickTag en la imagen -->
<a href="javascript:void(window.openModal(window.clickTag))">
<img
id="img"
alt="UCLA Health - Donde el descubrimiento conduce a una Atención Oncológica de Primer Nivel"
src="https://cms-cdn.nyc3.cdn.digitaloceanspaces.com/ucla/UCLAH-El-Economista-Publication-BOX-NOTE-300X250.jpg"
style="width: 300px; height: 250px; cursor: pointer"
/>
</a>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe
id="formFrame"
src=""
frameborder="0"
style="width: 100%; height: 85vh"
></iframe>
</div>
</div>
<script>
var modal = document.getElementById("modal");
modal.style.display = "none";
modal.style.position = "fixed";
modal.style.zIndex = "1000";
modal.style.padding = "2rem 1rem";
modal.style.boxSizing = "border-box";
modal.style.left = "0";
modal.style.top = "0";
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.justifyContent = "center";
modal.style.alignItems = "center";
modal.style.overflow = "auto";
modal.style.backgroundColor = "rgba(0,0,0,0.4)";
modal.style.opacity = "0";
modal.style.transition = "opacity 0.4s ease";
var modalContent = document.querySelector(".modal-content");
modalContent.style.backgroundColor = "#fefefe";
modalContent.style.margin = "auto";
modalContent.style.padding = "1rem";
modalContent.style.border = "1px solid #888";
modalContent.style.width = "100%";
modalContent.style.maxWidth = "770px";
modalContent.style.borderRadius = "1rem";
modalContent.style.boxShadow =
"0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)";
modalContent.style.animation = "modal-open 0.4s ease-out";
var close = document.querySelector(".close");
close.style.color = "#aaa";
close.style.float = "right";
close.style.fontSize = "28px";
close.style.fontWeight = "bold";
close.onmouseover = function () {
this.style.color = "black";
this.style.textDecoration = "none";
this.style.cursor = "pointer";
};
close.onmouseout = function () {
this.style.color = "#aaa";
};
var img = document.getElementById("img");
var span = document.getElementsByClassName("close")[0];
function openModal() {
modal.style.display = "flex";
setTimeout(function () {
modal.style.opacity = "1";
}, 10);
}
function closeModal() {
modal.style.opacity = "0";
setTimeout(function () {
modal.style.display = "none";
}, 400);
}
span.onclick = closeModal;
img.onclick = openModal;
window.onclick = function (event) {
if (event.target == modal) {
closeModal();
}
};
var formFrame = document.getElementById("formFrame");
formFrame.src =
"https://uclahs.az1.qualtrics.com/jfe/form/SV_beXtHliSrdJr2Ki?Q_Language=ES-ES";
</script>
</body>
</html>
11
4
440KB
926KB
108.0ms
201.0ms
495.0ms