TIPOS DE EVENTOS
algunos eventos de los explicados en clase
-> ondblclick: oprimir el ratón dos veces seguidas.
-> onfocus: es cuando el puntero está activo en algún objeto, tiene el foco en algún objeto.
-> onblur: es cuando un objeto pierde el foco, es decir, es quien tuvo antes el foco
-> onclick: al oprimir y soltar el ratón.
-> onkeypress: al oprimir una tecla.
-> onkeyup: soltar una tecla pulsada.El profesor nos explico sobre las ventanas emergentes. tambien sobre los parametros de window.open().
1. Sentencia Javascript para abrir una ventana
La sentencia es simplemente la función window.open(), lo más complicado es saber cómo utilizar esa función, pero ahora veremos que no reviste ninguna complicación.
La función window.open() recibe tres parámetros, que se colocan dentro de los paréntesis, de este modo:
window.open(URL,nombre_de_la_ventana,forma_de_la_ventana)
Veamos rápidamente cada uno de estos parámetros por separado.
URL: representa el URL que deseamos abrir en la ventana secundaria, por ejemplo http://www.desarrolloweb.com
nombre_de_la_ventana: es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo target del HTML
forma_de_la_ventana: se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede definir su altura, anchura, si tiene barras de desplazamiento, etc
Veamos un ejemplo de sentencia Javascript completa para abrir una ventana secundaria:
window.open("http://www.desarrolloweb.com" , "ventana1" , "width=120,height=300,scrollbars=NO")
Esto quiere decir que abra la página inicial de desarrolloweb.com en una ventana secundaria a la que vamos a llamar ventana1. Además, la ventana será de 120 pixels de ancho, 300 de alto y no tendrá barras de desplazamiento.
Una aclaración adicional, si después de abrir esa ventana colocamos otro enlace en la página que abría la ventana cuyo atributo target está dirigido hacia el nombre_de_la_ventana (en este caso ventana1), este enlace se mostrará en la ventana secundaria.
2. Función que abre una ventana
Lo más cómodo para abrir una ventana es colocar una función Javascript que se encarge de las tareas de abrirla y que reciba por parámetro la URL que se desea abrir.
El script es sencillo, veámoslo a continuación:
<script language=javascript>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=120,height=300,scrollbars=NO")
}
</script>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=120,height=300,scrollbars=NO")
}
</script>
3. Colocamos un enlace
Este enlace no debe estar dirigido directamente a la página que queramos abrir, sino a la sentencia Javascript necesaria para abrir la ventana secundaria. Para ejecutar una sentencia Javascript con la pulsación de un enlace lo hacemos así:
<a href="javascript:sentencia_javascript_para_abrir_la_ventana">
Ahora Veamos cómo quedaría todo ese enlace en la página.
<a href="javascript:ventanaSecundaria('http://www.desarrolloweb.com')"> Pincha en este enlace para abrir la ventana secundaria</a>
Que da como resultado:
Pincha en este enlace para abrir la ventana secundaria
(En la página que vayamos a colocar este enlace deberíamos tener el script que hemos hecho anteriormente que contenía la función para abrir la ventana.)
(En la página que vayamos a colocar este enlace deberíamos tener el script que hemos hecho anteriormente que contenía la función para abrir la ventana.)
Hay que fijarse que las comillas simples que se colocan para definir el URL que se pasa como parámetro de la función ventanaSecundaria(). Son comillas simples porque el href del enlace ya tiene unas comillas dobles, y dentro de comillas dobles siempre se han de utilizar comillas simples a no ser que deseemos cerrar las comillas dobles.
Parámetros para dar forma a una ventana
Estos atributos los puedes utilizar en la función window.open() para definir la forma que deseas que tenga tu ventana secundaria.
| Width | Ajusta el ancho de la ventana. En pixels |
| Height | Ajusta el alto de la ventana |
| Top | Indica la posición de la ventana. En concreto es la distancia en pixels que existe entre el borde superior de la pantalla y el borde superior de la ventana. |
| Left | Indica la posición de la ventana. En concreto es la distancia en pixels que existe entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana. |
| Scrollbars | Para definir de forma exacta si salen o no las barras de desplazamiento. scrollbars=NO hace que nunca salgan. Scrollbars=YES hace que salgan (siempre en ie y solo si son necesarias en NTS). |
| Resizable | Establece si se puede o no modificar el tamaño de la ventana. Con resizable=YES se puede modificar el tamaño y con resizable=NO se consigue un tamaño fijo. |
| Directories (barra directorios) | A partir de aquí se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegación que tienen los navegadores más populares, como podría ser la barra de menús o la barra de estado. Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea. Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea. |
| Location (barra direcciones) | |
| Menubar (barra de menús) | |
| Status (barra de estado) | |
| Titlebar (la barra del título) | |
| Toolbar (barra de herramienta |
tomado de :https://desarrolloweb.com/articulos/18.php
EJEMPLOS DEL WINDOW.OPEN
Ejemplo
Abrir una página about: blank en una nueva ventana:
var myWindow = window.open("", "", "width=200,height=100");
Ejemplo
Abrir una nueva ventana llamada "MsgWindow", y escribir algún texto en ella:
var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
Ejemplo
Vuelva a colocar la ventana actual con una nueva ventana:
var myWindow = window.open("", "_self");
myWindow.document.write("<p>I replaced the current window.</p>");
Ejemplo
Abrir una nueva ventana y controlar su apariencia:
window.open("https://www.w3schools.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
Ejemplo
Abrir varias ventanas:
window.open("http://www.google.com/");
window.open("https://www.w3schools.com/");
Ejemplo
Abrir una nueva ventana. Close () para cerrar la nueva ventana:
function openWin() {
myWindow = window.open("", "myWindow", "width=200,height=100"); // Opens a new window}
function closeWin() {
myWindow.close(); // Closes the new window}
Ejemplo
Abrir una nueva ventana. Utilice la propiedad de nombre para devolver el nombre de la nueva ventana:
var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");
Ejemplo
Usando la propiedad de apertura para devolver una referencia a la ventana que se creó la nueva ventana:
var myWindow = window.open("", "myWindow", "width=200,height=100"); // Opens a new windowmyWindow.document.write("<p>This is 'myWindow'</p>"); // Text in the new windowmyWindow.opener.document.write("<p>This is the source window!</p>"); // Text in the window that created the new window
TOMADO DE :https://www.w3schools.com/jsref/met_win_close.asp
Ventana close () Método
Ejemplo
Utilice abierta () para abrir una nueva ventana, y close () para cerrar la nueva ventana:
function openWin() {
myWindow = window.open("", "myWindow", "width=200, height=100"); // Opens a new window}
function closeWin() {
myWindow.close(); // Closes the new window}
Más "hacerlo por uno mismo" ejemplos a continuación.
Definición y Uso
El método close () cierra la ventana actual.
Soporte para el navegador
| Method | |||||
|---|---|---|---|---|---|
| close() | Yes | Yes | Yes | Yes | Yes |
Sintaxis
window.close()
parámetros
| Ninguna |
Detalles técnicos
| Valor de retorno: | Se desconoce el valor de retorno |
|---|
Más ejemplos
Ejemplo
Abrir "www.w3schools.com" en una nueva ventana, y utilizar close () para cerrar la ventana:
function openWin() {
myWindow = window.open("https://www.w3schools.com", "_blank", "width=200, height=100");
}
function closeWin() {
myWindow.close();
}
https://www.w3schools.com/jsref/met_win_close.asp
NUEVO CODIGO PARA VENTANAS MODALES
Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuery personalizado. Se puede usar para crear ventanas modales para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.
En este artículo vamos a explicar como disponer de ventanas modales de Twitter Bootstrap Modals.
En nuestro <head> deberemos añadir los estilos de Bootstrap.
<link href="bootstrap.css" rel="stylesheet">
La ventana ya presenta una visualización bastante buena pero podemos cambiarla editando la hoja de estilos.
En nuestro <body> necesitaremos crear un link que abrirá la ventana:
<a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Abrir ventana modal</a>
Ahora tendremos justo debajo el código que representa la ventana en display:none.
<div id="example" class="modal hide fade in" style="display: none;"> <div class="modal-header"> <a data-dismiss="modal" class="close">×</a> <h3>Cabecera de la ventana</h3> </div> <div class="modal-body"> <h4>Texto de la ventana</h4> <p>Mas texto en la ventana.</p> </div> <div class="modal-footer"> <a href="index.html" class="btn btn-success">Guardar</a> <a href="#" data-dismiss="modal" class="btn">Cerrar</a> </div> </div>
Y finalmente solo faltará incluir los scripts antes de la etiqueta de cierre </body>:
<script src="jquery.js"></script> <script src="bootstrap-modal.js"></script>
https://www.jose-aguilar.com/blog/bootstrap-modal/
¿COMO HACER UNA SIMPLE VENTANA MODAL?
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>
</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.
http://www.hinojosachapel.com/2008/11/como-hacer-una-simple-ventana-modal-con-html-y-javascript.aspx#.WL88ITs182w
