Abra um aplicativo em uma janela modal a partir do código html [RESUELTO]

Programação
#1

Hola…
En una de mis apps, tengo que armar un slide (que lo programo con HTML y Javascript), y al tocar la imagen, debería abrir una aplicación del tipo form.

Con este codigo, funciona, abriendo el app en el mismo iframe…

$AuxHtml.= ‘

’;

Ahora, hay alguna forma de abrir el mismo app, pero en una ventana modal? Estoy viendo con javascript, pero no puedo hacerlo funcionar…

Cualquier ayuda es bienvenida!

Olá
Em um dos meus aplicativos, tenho que construir um slide (que programo com HTML e Javascript), e ao tocar na imagem, ele deve abrir um aplicativo do tipo formulário.

Com esse código funciona, abrindo o app no ​​mesmo iframe.

$AuxHtml.= ‘

’;

Agora, existe alguma maneira de abrir o mesmo aplicativo, mas em uma janela modal? Estou vendo com javascript, mas não consigo fazer funcionar…

Qualquer ajuda é bem vinda!

#2

SOLUCION:
En onScriptInit

?>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<?php

Por comodidad, también:

StyleModal();

y como funcion php

?> 
<style>

.modal {
 display: none; /* Hidden by default */
 position: relative; /* Stay in place */
 z-index: 1; /* Sit on top */
 padding-top: 0%; /* Location of the box */
 left: 0;
 top: 0;
 width: 90%; /* Full width */
 height: 90%; /* Full height */
 max-width: 90%; /* Full width */
 max-height: 90%; /* Full height */
 overflow: clip; /* Enable scroll if needed */
 padding: 0px;
 background-color: #F6EDE7; /* Fallback color */
}

/* Modal Content */
.modal-content {
 position: relative;
 background-color: #fefefe;
 margin: auto;
 padding: 0;
 border: none;
 width: 100%;
 height: 100%;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatetop;
 animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
 from {top:-300px; opacity:0} 
 to {top:0; opacity:1}
}

@keyframes animatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}

/* The Close Button */
.close {
 color: white;
 float: right;
 font-size: 28px;
 font-weight: bold;
}

.close:hover,
.close:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}
</style>
<?php

para invocarlo (Obviamente, modificar)

$AuxHtml.= '<a href="../form_Articulos_Publico/form_Articulos_Publico.php?Cod_Articulo='.$art[0].'" rel="modal:open"><img src="'.trim($filename).'" width="50%"  alt=""></a>';

Si es necesario:

echo '

<div id="MyModal" class="modal">
  <a href="#" rel="modal:close">Cerrar</a>
</div>

<script type = "text/javascript"> 
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks on <span> (x), close the modal
img.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
';