VENTANAS EMERGENTES Y VENTANAS MODALES.
La forma correcta de lanzar una ventana pop-up con Javascript:
El siguiente es el código a utilizar para lanzar un pop-up:
<a href="/index.htm" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>Lanzar correctamente
Simplemente cambiar en
href="/index.htm" el nombre del archivo .htm que se abrirá en la ventana nueva, y cambiar los valores de width y height según el ancho y alto deseados (en pixeles).
EJERCICIO:
<html> <head><title>ventanas emergentes</title></head> <body> <a href=""onclick='javascript:window.open("https://www.google.com.co/webhp?hl=es&sa=X&ved
=0ahUKEwjh7JCU8a7SAhXBeSYKHVBUDEsQPAgD","miventana","_blank","width=300,height=200
,menubar=no,top=130,left=930")'>abrir google</a> <br> <br> <span onclick='javascript:window.open("https://www.google.com.co/webhp?hl=es&sa=X&ved=
0ahUKEwjh7JCU8a7SAhXBeSYKHVBUDEsQPAgD","miventana","_blank","width=300,height=200,
menubar=no,top=130,left=930")'>abrir google</span>
</body> </html>
VENTANAS MODALES:
Primero necesitamos un contenedor, un espacio donde ubicar el contenido web que deseamos mostrar. Normalmente ésto se hace con la etiqueta DIV. Este contenedor formará parte de la página web, pero no se mostrará cuando se visualice la página: será un elemento invisible. Luego necesitamos alguna manera de mostrar el contenedor, y su contenido, cuando nos haga falta. Y por último, necesitaremos también alguna forma de ocultar el contenedor. ¡Manos a la obra!
Pega al final de la sección body de tu página web el siguiente código:
<div id=”miVentana” style=”position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;”>
Aquí pones tu contenido web
</div>
Aquí pones tu contenido web
</div>
Los atributos más importantes de este DIV son:
id: el identificador del elemento, que nos permitirá recuperarlo y acceder a él a través del DOM.
display: le indicamos al navegador que no muestre este elemento (none).
display: le indicamos al navegador que no muestre este elemento (none).
Dentro del DIV deberás colocar el contenido web que deseas mostrar. ¡Procura que quepa dentro del contenedor!
Luego crea un elemento de script en tu código HTML e inserta las siguientes líneas:
function mostrarVentana()
{
var ventana = document.getElementById(‘miVentana’);
ventana.style.marginTop = “100px”;
ventana.style.left = ((document.body.clientWidth-350) / 2) + “px”;
ventana.style.display = ‘block’;
}
{
var ventana = document.getElementById(‘miVentana’);
ventana.style.marginTop = “100px”;
ventana.style.left = ((document.body.clientWidth-350) / 2) + “px”;
ventana.style.display = ‘block’;
}
Esta función Javascript obtiene una referencia al contenedor a través de su id, lo coloca en el centro del documento mostrado en el navegador, y lo hace visible.
Por último, agrega éstas líneas de código:
function ocultarVentana()
{
var ventana = document.getElementById(‘miVentana’);
ventana.style.display = ‘none’;
}
{
var ventana = document.getElementById(‘miVentana’);
ventana.style.display = ‘none’;
}
Esta función obtiene una referencia al contenedor a través de su id, y lo hace invisible.
EJERCICIO:
EJERCICIO:
<html> <head> <title>hinojosachapel.com | Una simple ventana modal con HTML y Javascript</title> <script type="text/javascript"> function mostrarVentana() { var ventana = document.getElementById('miVentana'); // Accedemos
al contenedor
ventana.style.marginTop = "100px"; // Definimos
su posición vertical. La ponemos fija para simplificar
el código
ventana.style.marginLeft =
((document.body.clientWidth-350) / 2) + "px"; //
Definimos su posición horizontal
ventana.style.display = 'block'; // Y lo hacemos visible
}
function ocultarVentana()
{
var ventana = document.getElementById('miVentana'); //
Accedemos al contenedor
ventana.style.display = 'none'; // Y lo hacemos invisible
}
</script>
</head>
<body>
Haz click <a href="javascript:mostrarVentana();">aquí</a>
<div id="miVentana" style="position: fixed; width:
350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica,
sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid;
background-color: #FAFAFA; color: #000000; display:none;"> <div style="font-weight: bold; text-align: left;
color: #FFFFFF; padding: 5px; background-color:#006394">
Título de la ventana</div> <p style="padding: 5px; text-align: justify;
line-height:normal">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vestibulum a est. Suspendisse vehicula, nisl vitae
molestie pulvinar, eros nunc volutpat neque, sit amet ultricies nulla sem at ipsum.</p>
<div style="padding: 10px; background-color: #F0F0F0; text-align: center;
margin-top: 44px;">
<input id="btnAceptar" onclick="ocultarVentana();"name="btnAceptar" size="20"
type="button" value="Cerrar Ventana" />
</div> </div> </body> </html>
Comentarios
Publicar un comentario