            |
| FOROS | TUTORIALES | REVISTA | SERVICIOS | VíDEOS | NOTICIAS | BLOGS |
| ||
Página Completa De Superposición De VentanasAbraham Chaffin
Página completa ventana emergente superposición En este tutorial usted aprenderá cómo crear una página completa ventana emergente que superpone una html página. Esta técnica se utiliza a menudo para mostrar un vídeo, Archivo de película, Cuadro, O la forma cuando un usuario hace clic en un elemento en una página web.
Ver ejemplo IntroducciónEsta técnica no es una ventana emergente en general como uno podría pensar. No es una ventana separada de la html navegador que se abre, sino más bien un div superposiciones que el actual html página. El div es semi-transparente y crea un bonito efecto que permite al usuario saber que pueden volver a la otra página mediante el cierre de la ventana (p) que está en la cima.Detrás de la realización de este método es bastante simple: El estado inicial de la div que la superposición de página Se oculta, sin contenido en su interior html. Significa que inicialmente no hay nada entre la etiqueta div apertura y el cierre div etiqueta y el elemento tiene una pantalla de ninguno. Para iniciar la visualización de la div Primero debe elegir y elemento que un usuario haga clic en, Se ciernen sobre la, Etc. Para asignar el comportamiento a. Incluso es posible que se inicia cuando se carga la página si desea. En general, que tiene una imagen, Botón, O de texto que un usuario hace clic en para iniciar la función javascript. Cuando se visualiza el div Por la función javascript que es básicamente la eliminación de la pantalla el valor de ninguno a la pantalla en blanco o de valor'', que vuelve a los elementos de valor por defecto que se muestra. En segundo lugar, el div del interior html está lleno de predefinidos html código que será el código que tiene todo lo que quieras que aparezca en la ventana de superposición. En este ejemplo vamos a tener un vídeo dentro de un cuadro que ayuda a centrar el video en el centro de la pantalla. También habrá un botón de cierre para cerrar la ventana semi-transparente o pop-up div. Clic en el botón de cierre en la ventana emergente Inicia cuando la inversión de la que se mostró. Div que asigna el valor de la pantalla de nuevo a ninguno, y establece el interior html volver a la nada. El códigoPara empezar aquí es el código de principio a fin y, a continuación, vamos a ir sobre él pieza por pieza:Modo estrictoEsta línea de código es necesario en la parte superior del documento para permitir el modo estricto en ie7. Fija la posición no es compatible con IE7 y ejecutado sin que ello este tutorial no funciona. Ser conscientes también de que este puede no funcionar en todos los navegadores como el posicionamiento fijo es una nueva propiedad css.Css estiloVamos a ir sobre el estilo css del div y ver lo que la convierte en un semi-transparente div overlays que el resto de la página:Z-el índice de propiedad CSS se utiliza para elevar la capa z en el espacio por encima de todo otro elemento tales como menús desplegables, Etc. Ajuste a 10.000 bastante bien garantiza que va a obtener por encima de la mayoría de los demás elementos que han definido un índice-z. La parte más difícil es conseguir que el semi-transparente div efecto a través de múltiples navegadores. Firefox, Internet explorer, Safari, ópera, E incluso google cromo = o no todos los navegadores utilizan el mismo semi-transparente css propiedad establecido. Es decir, utiliza los filtros de la. Mozilla Firefox ha "-MOX-opacidad". Y otros utilizan "opacidad" que hace que el más sentido para mí y es de esperar que se convierta en la norma en el futuro. La primera línea "# (displaybox"Asigna el siguiente estilo para el elemento con el ID de displaybox. Los próximos cinco líneas son diferentes maneras de hacer que el conjunto de opacidad al 50% " Filtro: Alfa (opacidad = 50); / * es decir, de más edad * / Filtro:PROGID:Dximagetransform.microsoft.Alfa (opacidad = 50); / * Es decir * / -moz-opacidad: .50; / * mayores mozilla * / -khtml-opacidad: 0.5; / * mayores de safari * / Opacidad: 0.5; / * el apoyo de mozilla actual, Safari, Y la ópera * / " Simplemente cambiar los 5, .5 o 50 valores a lo que te gusta. El ejemplo se establece el 50% de opacidad. "Background-color:# 000000;"Por supuesto hace que el color de fondo negro y luego el 50% de transparencia hará gris. "Posición:Fijo;"Fija la posición que se fije no relativo o absoluto en el flujo de la página. Lo que es lo que el elemento puede saltar y flotar por encima de otros elementos y se fija a la ventana y no la página o de otros elementos. Pone en relación el elemento de posicionamiento en el flujo de la página y se mueve y se mueve en torno a otros elementos que. Flota sobre absolutos, sino que es relativo a la página de la ventana no, Si usted utiliza este elemento sólo permanezca en la parte superior de la página. "Superior:0px; izquierda:0px; la anchura:100%; altura:100%;"Lugares semi transparente div en la esquina superior izquierda y se extiende hacia fuera en la medida en que puede ir a través de la ventana. "Alinear texto:Centro; vertical alinear:Medio;"Es mi intento de centro de inicio de los elementos dentro de la div a la mitad de la página. JavascriptAhora echemos un vistazo al javascript que hace que el elemento de cambio cuando el usuario interactúa con la página y ejecuta la función javascript:La primera línea de la función se declara el nombre de la función "Función clicker () ("Que se utilizará en toda la página. "Var = Thediv documento.GetElementById ( 'displaybox'); " Establece el valor de "Thediv" a la variable de div con el ID de "displaybox". "Thediv" variables se utilizarán en el resto de la función de modo que el navegador no tenga que volver a obtener el elemento displaybox. "If (Thediv.Estilo.== mostrar "ninguna") ("Dice básicamente, "Thediv si ahora no se visualiza hacer lo que estoy a punto de decirle." Thediv hacer visibles "Thediv.Estilo.Display = "";". Caída en este html en Thediv "Thediv.InnerHTML = "a href='#' onclick='return clicker();' cerrar ventana / a"". Inbetween las dos comillas aquí que poner lo html que quieras que aparezca. Recordar que el hecho de tener otra cita [ "] terminará esta etiqueta por lo que debe utilizar comillas simples en su html [ '] O escapar de la [ "] con una barra [] delante de todas las cotizaciones e.g. [ "]. Usted debe tener en algún lugar existe la posibilidad de cerrar la ventana de nuevo. Otro sabio que el usuario se queda bloqueado con la ventana en la parte superior de la página y no podrán volver. ") else ("Si el div era visible entonces... "Thediv.Estilo.Display = "none";"Ocultarlo "Thediv.InnerHTML ='';"Y establezca su contenido a la nada. "}"Final de la declaración de otra persona si. "Return false;"Return false para la función. Este es, básicamente, de modo que el vínculo no ir a la realidad del destino de los href al hacer clic sobre ella. Si se utiliza un método onclick en un vínculo. "}"Fin de la función. Hacer que funcionePara que sea realmente el trabajo en la página usted necesita tener el div en algún lugar de la página oculta al principio y algo para que el usuario haga clic en:Div oculto displaybox: Un vínculo que se ejecutará y devolverá el clicker función javascript onclick: Ver ejemplo Esto debería darle una idea de cómo crear este efecto y también darle suficiente entendimiento para ajustar, Cambiar, Y manipular a ir a su propio html diseño. Disfrutar! | |||||||||||||
|
FOROS • TUTORIALES • REVISTA • SERVICIOS • VíDEOS • NOTICIAS • BLOGS © CreativeCOW.net Todos los derechos reservados. Creative Comunidades del Mundo [Superior] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
