Open a app in a modal windows from html code [SOLVED]

Scriptcase 9 General
#1

Hello…
In one of my apps, I have to build a slide (which I program with HTML and Javascript), and when touching the image, it should open a form type application.

With this code, it works, opening the app in the same iframe.

$AuxHtml.= ‘

’;

Now, is there any way to open the same app, but in a modal window? I’m seeing with javascript, but I can’t get it to work…

Any help is welcome!

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!

#2

Put a field on the grid of TYPE HTML_Image.
Have it fill with your desired image.
Then go To Application Links->Field Link and select the image field.
You will be able to have it open in a modal to a page of your choice.

#3

SOLUTION:

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>
';
1 Like