Ventana emergente sencilla. Creamos nuestra propia ventana emergente usando javascript, css y jQuery. Que método elegir
3. Ejemplo de una ventana modal de jQuery llamada desde un enlace (de Demo)
Lo más probable es que ya haya visto una ventana modal emergente en Internet más de una vez: confirmación de registro, advertencia, información de fondo, descarga de archivos y mucho más. En este tutorial ofreceré varios ejemplos de cómo crear el más simple. ventanas modales.
Crear una ventana modal emergente simple Comencemos a buscar en el código una ventana modal simple que aparecerá inmediatamente.código jQuery
$(documento).listo(función()
{
alert("Texto en ventana emergente");
});
Pega el código en cualquier parte del cuerpo de tu página. Inmediatamente después de que se cargue la página, sin ningún comando, verá una ventana similar a esta:
Pero el siguiente código se ejecutará después de que se cargue toda la página en el navegador. En nuestro ejemplo, después de cargar la página con imágenes, aparecerá una ventana emergente simple:
$(ventana).cargar(función()
{
alert("¡La página ha completado la carga!)");
});
A menudo puede ver que los formularios de inicio de sesión y registro se encuentran en dichas ventanas. Pongámonos manos a la obra
Primero, escribamos la parte html. Colocamos este código en el cuerpo de su documento.
Llamar a una ventana modal
Texto de ventana modal
Cerca
Texto en una ventana modal.
Código CSS. Ya sea en archivo css separado, o en la cabeza.
cuerpo (
familia de fuentes:verdana;
tamaño de fuente: 15px;
}
.link (color:#fff; decoración de texto: ninguna)
.link:hover (color:#fff; decoración de texto:subrayado)
#mascarilla (
posición:absoluta;
izquierda: 0;
arriba: 0;
índice z: 9000;
color de fondo:#000;
pantalla: ninguna;
}
#cajas.ventana (
posición:absoluta;
izquierda: 0;
arriba: 0px;
-arriba: 40px;
ancho: 440 px;
altura: 200 px;
pantalla: ninguna;
índice z: 9999;
relleno: 20px;
desbordamiento: oculto;
}
#cuadros #diálogo (
ancho: 375 px;
altura: 203px;
relleno: 10px;
color de fondo: #ffffff;
}
.arriba(
posición:absoluta;
izquierda: 0;
arriba: 0;
ancho: 370 px;
altura: 30 píxeles;
fondo: #0085cc;
relleno: 8px 20px 6px 10px;
}
.cerca(
flotador:derecha;
}
.contenido(
relleno superior: 35px;
}
EN código jQuery Centrémonos en la posición de la ventana modal y la máscara, en nuestro caso el oscurecimiento gradual del fondo.
¡Atención! ¡No olvides incluir la biblioteca en el encabezado del documento!
Conexión de la biblioteca desde el sitio web de Google. Bueno, el código jQuery en sí.
código jQuery
$(documento).listo(función() (
$("a").hacer clic(función(e) (
e.preventDefault();
var id = $(this).attr("href");
var alturamascara = $(documento).altura();
var MaskWidth = $(ventana).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#máscara").fadeIn(1000);
$("#mask").fadeTo("lento",0.8);
var winH = $(ventana).height();
var winW = $(ventana).width();
$(id).css("arriba", winH/2-$(id).height()/2);
$(id).css("izquierda", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".ventana .cerrar").hacer clic(función (e) (
e.preventDefault();
$("#máscara, .ventana").hide();
});
$("#mask").hacer clic(función () (
$(esto).ocultar();
$(".ventana").ocultar();
});
});
Buenos días a todos los lectores de este artículo. Si necesita crear una ventana emergente para su servicio web, ¡ha encontrado la publicación adecuada! Hoy te contaré cómo crear una ventana emergente con herramientas JavaScript, css y jQuery.
El artículo discutirá en detalle 3 opciones para escribir ventanas emergentes con un fondo oscuro y, al final, analizará cada método. Posteriormente podrá utilizar cualquier código que desee de los ejemplos presentados en sus programas. ¡Ahora manos a la obra!
No, dime, ¿por qué es necesario?De hecho, en muchos se utiliza un mecanismo como las ventanas emergentes. Como ejemplo, podemos citar el mismo "VKontakte" u otras redes sociales, donde al ver fotos u otros archivos gráficos se abre al usuario, diseñado como una ventana emergente.
Otro caso de uso común de este enfoque son los cuadros de mensajes para las personas que entran o salen del sitio. Estos mensajes aparecen una vez cuando se carga la página o después de hacer clic en la cruz que cierra la pestaña.
También estoy seguro de que cada uno de ustedes ha visto una imagen en la que, cuando hace clic en ciertos botones de un servicio, aparece una ventana frente a usted pidiéndole que se registre. Después de completarlo, los datos se envían al servidor usando, por ejemplo, php y luego se le abren todas las capacidades del servicio.
No puedo guardar silencio sobre la tercera forma de utilizar ventanas emergentes. Esto es spam y publicidad.
Empecemos simpleAhora llegamos a los ejemplos mismos. empezaré con implementación de software, realizado usando css y html. Escribí una aplicación en la que aparece una ventana cuando se hace clic en un determinado botón. Coloqué la imagen en él. Sin embargo, puedes poner cualquier información allí, ya sean enlaces, texto, fotos, vídeos, formularios de registro, etc.
Entonces, él mismo cabe en unas pocas líneas, porque todo el jugo está en la estilización correcta.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Ventana emergente Haz clic en mí 
|
Ventana emergente Haz clic en mí
Como puedes ver, todo es muy sencillo. Y ahora pasaré a mesas en cascada. Habrá mucho código allí, pero nuevamente es fácil.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/*Pantalla atenuada*/ .overlay ( color de fondo: rgba(1, 0, 0, 0.77); derecha: 0; izquierda: 0; posición: fija; arriba: 0; abajo: 0; índice z: 11; display: none; ) /*La capa se vuelve visible*/ .overlay:target ( display: block; ) /*Estirar la imagen al ancho completo de la ventana emergente*/ .window img ( width: 100%; ) /*Características de la propia ventana que aparece después de hacer clic en el botón*/ .window ( izquierda: 50%; índice z: 12; margen: 0; posición: fija; relleno: 15px; borde: 1px sólido #383738; fondo: #fefeff; radio de borde: 15px; sombra de cuadro: 0 13px 21px rgba(0,1,0,.19),0 21px 63px rgba(0,1,0,.31); %); 0,6 s de salida; ) /*Aparición de una ventana modal desde el borde superior de la pantalla*/ .overlay:target+.window ( transform: traducir(-50%, 0); arriba: 17%; ) /*Apariencia del botón “Cerrar” */ .close ( arriba: -11px; derecha: -11px; ancho: 23px; alto: 23px; posición: absoluta; relleno: 0; borde: 2px sólido #ccd; radio-borde : 15px; color de fondo: rgba (61, 61, 61, 0,81);
sombra de cuadro: 0 0 12px #010;alineación de texto: centro; decoración de texto: ninguna; fuente: 18px sans-serif; peso de fuente: negrita; transición: toda facilidad .9s; ) .close:before ( color: rgba(254, 254, 254, 0.89); content: "X"; text-shadow: 0 1px 3px #010; font-size: 14px; ) /*Cambia las características al pasar el cursor sobre un área */ .close:hover ( color de fondo: rgba(253, 21, 0, 0.83); transformar: rotar(360deg); ) /*Diseño del botón principal*/ #botón (margen izquierdo: 40%; tamaño de fuente: 33px; radio de borde: 11px; color de fondo: rgba (63, 63, 63, 0.9); sombra de cuadro: 0 3px 10px #010;
Funciones de JavaScript
EN
lenguaje de escritura
‹script› var text = confirm("Algo de contenido de texto. ¿Has leído todo?");
Si la ventana que aparece vista estándar Puede ingresar cierta información, luego se le solicitará.
| 1 2 3 4 5 6 7 8 9 |
var isLogIn= Prompt("¿Es usted suscriptor?", ""); alerta("Respuesta: "+isLogIn);
Además, en js window hay un método que te permite cargar nuevas páginas y abrir nuevas ventanas. Este
window.open (“ruta”, “nombre”, “parámetros”)
Este método tiene muchos parámetros integrados. Si desea desmontarlos, abra la documentación oficial. Iré directamente a un ejemplo sencillo.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | ventana en js |
ventana en js var PopUpW = window.open("", "Ventana emergente", "resizable=no,scrollbars=no,width=350,height=150,copyhistory=1");
PopUpW.document.write("¡Mucho contenido de texto!");
Gracias a este código, la ventana emergente aparecerá inmediatamente después de que se cargue la página. Tenga en cuenta que los parámetros deben enumerarse separados por comas y sin espacios.Trabajando con jQuery
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | Bueno, llegamos a la biblioteca js: jQuery. Para implementar el enfoque descrito, escribí dos funciones en jq, que son responsables de la apariencia de la ventana y de su cierre. |
Haz clic en el enlace X ¡Alguna sugerencia!
/*abre la ventana emergente*/ $(document).ready(function() ( $("a#start").click(function(event)( event.preventDefault(); $("#overlay").fadeIn( 250, función())( $("#popUp") .css("display", "block") .animate((opacidad: 1, top: "55%"), 490); /* )); haciendo clic en la cruz cierro la ventana*/ $("#close, #overlay").click(function())( $("#popUp") .animate((opacity: 0, top: "35%") , 490, función())( $(this).css("display", "none"); $("#overlay").fadeOut(220); ));#popUp (arriba: 12%; izquierda: 50%; alto: 200px; posición: fija; ancho: 300px; radio del borde: 11px; fondo: #fef; margen izquierdo: -150px; margen superior: -100px; pantalla: ninguna; opacidad: 0; relleno: 17px; índice z: 6; ) #popUp #close (cursor: puntero; posición: absoluta; ancho: 23px; arriba: 17px; derecha: 17px; pantalla: bloque;) superposición ( índice z:4; color de fondo:#010; posición:fija; opacidad:0.86; ancho:100%; altura:100%; visualización:ninguna; arriba:0; izquierda:0; ) Haga clic en el enlace X ¡Alguna sugerencia!
Experimente, aprenda nuevas formas de implementarlo y no olvide suscribirse a mi blog. ¡Siempre me alegro de tener nuevos suscriptores! ¡Nos vemos! ¡Adiós!
Saludos cordiales, Roman Chueshov
Leer: 721 veces
Los cuales fueron mencionados anteriormente.
Hablando de las ventajas, podemos destacar varias claves:
- Fácilmente personalizable apariencia(en el archivo encontrará 2 temas: predeterminado y de arranque);
- Notificaciones tipo Growl bellamente mostradas después de responder a las alertas, que pueden usarse como comentarios para el usuario;
- Utiliza únicamente capacidades de JavaScript y no requiere bibliotecas de terceros;
- Compatibilidad entre navegadores;
- Alertify tiene su propia documentación completa.
Ya hay suficientes méritos para cuatro sólidos, además, todos notarán algo por sí mismos. Me complacieron especialmente las mininotificaciones, que no siempre se encuentran en los scripts de ventanas modales ya preparados. Pues alertify pesa bastante. Hoy en día, casi cualquier sitio web tiene muchos scripts y bibliotecas de terceros, como jQuery y MooTools, y esto a menudo añade una carga adicional a las páginas.
Si, mientras lee la introducción, aún no ha tenido tiempo de mirar los ejemplos que he preparado, le sugiero que los estudie y pruebe. La página de demostración muestra claramente cómo funcionan las ventanas emergentes de JavaScript y lo fácil que es usar. Ahora continuaremos entendiendo alertify y, primero, conectaremos el complemento en sí y sus estilos:
Agregaremos el script al final de la página:
Ahora tenemos un nuevo objeto Alertify y, para ver su contenido, sugiero usar Firebug.
Este objeto tiene dos subobjetos más, que usaremos para implementar nuestras ventanas modales y notificaciones. Al principio del artículo dije que este script es autosuficiente, ¡y así es! Por ejemplo, no necesitamos escribir una versión larga de la búsqueda de un elemento por id en árbol DOM- solo usemos obtener método(). Los otros dos métodos, on() y off(), ambos en jQuery, hacen exactamente lo mismo: adjuntar eventos a elementos o eliminarlos.
Ahora escribiremos un fragmento de código introductorio en el que ocultaremos llamadas largas a métodos y objetos:
Var d = Alertify.dialog, l = Alertify.log, $ = Alertify.get;
De esta forma será mucho más cómodo. En mis ejemplos no usaré el método on(), pero usaré onclick para mayor claridad. agreguemos marcado HTML para nuestra primera alerta:
Diálogo de alerta
Usemos el complemento:
$("alert").onclick = function())( d.alert("Mensaje de texto en ventana de alerta modal"); return false; );
Para crear una ventana modal confirm(), también agregamos HTML:
Confirmar diálogo
Y usemos el código correspondiente:
$("confirm").onclick = function())( d.confirm("Mensaje de texto en la ventana modal confirma", function())( // Cuando haces clic en "OK", function())( // Al hacer clic en "Cancelar" )); devuelve falso;
Nos queda el mensaje(), agrega HTML:
Diálogo rápido
y yo código javascript:
$("prompt").onclick = function())( d.prompt("Mensaje de texto en la ventana modal de solicitud", function(str)( // Cuando haces clic en "Aceptar" // str - el valor aceptado en la ventana), función ()( // Cuando haces clic en "Cancelar"), "Valor predeterminado");
Como puede ver, hemos visto las ventanas modales principales y es poco probable que surjan dificultades con ellas, y ahora pasemos a las notificaciones. En realidad, las notificaciones se implementan a través del objeto de registro. Y aquí hay varias opciones sobre cómo usarlo, la primera es el mensaje habitual:
L.info("Mensaje deslizante regular");
Mensaje de éxito:
L.success("Notificación exitosa");
Sobre el error:
L.error("Se produjo un error al completar el formulario");
Por eso hemos configurado hermosas alertas y notificaciones en nuestro proyecto. Esperanza, esta decisión Te será útil en tu trabajo y práctica, pero eso es todo lo que tengo.
Para muchos usuarios de Internet, el término "ventana emergente" evoca asociaciones negativas. Una imagen "flota" inmediatamente ante sus ojos de cómo, cuando intenta ver en el sitio información necesaria Este bastardo está cubriendo el texto requerido. Lo que es aún peor es que si intentas cerrarlo, el usuario suele ser transferido a otro recurso.
¿Estas ventanas emergentes tuyas son tan bastardas?A pesar de esto mala fama, las ventanas emergentes pueden ser útiles además de molestas. Inicialmente son solo una variedad. cuadros de diálogo, utilizado en programación como elementos de interfaz de usuario.
Sirven a título informativo y como medio de diálogo entre el usuario y el programa (aplicación web). Pero, lamentablemente, una actitud tan negativa de muchos usuarios hacia las ventanas emergentes está en gran medida justificada, porque en Internet se utilizan principalmente con fines publicitarios.
- Apertura el primer plano(emergente): aparece encima del principal;
- Apertura en segundo plano (pop-under): abre detrás de la ventana principal.
Estos últimos son los más insidiosos. Se vuelven activos y visibles para el usuario solo después de que se cierra el principal. Por lo tanto, no será posible determinar su origen y bloquearlos a tiempo.
Medios de luchaDebido al uso generalizado de ventanas emergentes para publicidad no deseada hay muchos desarrolladores en internet software comenzaron a incorporar medidas para combatirlos en sus productos.
El programa principal para utilizar Internet es el navegador. Por lo tanto, la principal forma de bloquear una acción es ventanas publicitarias implementado exactamente en el navegador:
- Internet Explorer: se convirtió en el último de todos productos de software, que implementó la capacidad de bloquear anuncios emergentes. Esto no se hizo hasta 2004;
- Opera: este producto fue el primer navegador del mundo con un bloqueador de ventanas emergentes incorporado. Las ventanas emergentes en Opera se pueden bloquear desde el año 2000;
- Mozilla Firefox: este navegador ha mejorado el enfoque para combatir la publicidad que se implementó en Opera. Por el contrario, en Mozilla no se bloquean todos los anuncios emergentes, sino sólo aquellos que se cargan al abrir la ventana principal.
En los navegadores modernos, el sistema de bloqueo de ventanas emergentes se configura a través de interfaz de usuario. Chrome, como la mayoría de los otros navegadores, tiene la capacidad de habilitar o deshabilitar el bloqueo, así como de crear una lista de excepciones (sitios confiables):
En programación web, se utilizan varias tecnologías para crear ventanas emergentes. El principal medio para crearlos sigue siendo javascript. Su funcionalidad incluye varios tipos de cuadros de diálogo, cuya acción es similar a la acción de las ventanas emergentes:
- El método alert() muestra lo habitual mensaje de texto. Para ocultar el diálogo después de leerlo, debe hacer clic en el botón "Aceptar" en la parte inferior de la ventana;
- El método confirm() es similar al método anterior. Pero el cuadro de diálogo que muestra, además de "Aceptar", también está equipado con un botón "Cancelar". Con su ayuda, el usuario puede aceptar o rechazar la condición especificada en la ventana;
- El método Prompt() se utiliza para llamar a otro tipo de ventana emergente. ventanas javascript. A diferencia de las mencionadas anteriormente, esta ventana también está equipada campo de texto. El usuario puede ingresar datos de texto en él, que se pueden asignar al valor de la variable deseada.
La acción de los tres métodos y los tipos de diálogo que llaman se muestran en la imagen:
Pero estos son sólo tipos de diálogos. Para crear una ventana emergente real en javascript use método abierto() del objeto ventana.
Aquí sintaxis completa método:
ganar = ventana. open (url, nombre, parámetros), donde:
- url es la dirección de la página que se abrirá en una nueva ventana;
- Nombre: el nombre de la ventana creada. Se puede utilizar para procesamiento posterior en formularios (parámetro de destino);
- Params: una cadena de parámetros para la nueva ventana. Su lista completa Puede averiguarlo usted mismo en la documentación de JavaScript.
La siguiente imagen muestra el método en acción y proporciona un script emergente simplificado:
Se crea una función f1, cuyo cuerpo implementa una llamada a la ventana. abierto() . Entonces hay una llamada este método con un parámetro que indica la dirección de la página que se abrirá en la ventana creada. Después de esto, se llama al método setTimeout(). Se le pasan como parámetros la función f1 y el intervalo de tiempo después del cual se abrirá una nueva ventana.
Creando una ventana emergente con usando CSSTambién puedes crear una ventana emergente en CSS. Esta característica se implementó sólo con el lanzamiento de la tercera versión de esta tecnología. No debes abusar de esta opción, ya que sólo funcionará en las versiones más recientes de los navegadores:
Como puede ver en la imagen, dicha ventana modal se creó usando CSS y html. A diferencia de las creadas con js, esta ventana emergente no se puede mover por la página. Además, su código es demasiado engorroso para describirlo en el alcance de este artículo. Pero el navegador no bloqueará dicha ventana.
Revisión de otras tecnologías.No es necesario que usted mismo desarrolle una ventana emergente. Hoy en día se ha creado mucho para esto. complementos gratuitos en jquery. Al conectar uno de ellos, obtendrá una ventana terminada.
También hay muchos complementos para CMS populares. Pueden incluir un conjunto completo de ventanas. El diseño y funcionalidad de cada uno de ellos está “a medida” para realizar una tarea concreta (registro, envío de un mensaje, etc.).
También hay varios guiones populares. A continuación se dará un ejemplo de uno de ellos. Las ventanas emergentes en Contacto y otras redes sociales populares funcionan según este principio:
Cómo hacer una ventana emergente en Jquery $(document).ready(function())( PopUpHide(); )); función PopUpShow())( $("#window-popup").show(); ) función PopUpHide())( $("#window-popup").hide(); ) .box ( ancho: 400px; alto : 300px; color de fondo: #ccc; relleno: 10px; color: #fff; ancho: 100%; altura mínima: 100%; color de fondo: rgba 0,0,0,0.5); oculto; posición: fija; superior: 0px; ) .popup .popup-content ( margen: 40px auto 0px auto; altura: 80px; relleno: 10px; color de fondo: #c5c5c5; radio-borde: 5px; sombra de cuadro: 0px 0px 10px #000;
Mostrar ventana emergente¡¡¡Felicitaciones, hiciste una ventana emergente !!! Ocultar ventana emergente
El código se proporciona en la versión "para los perezosos". Al pegarlo en cualquier editor y ejecutarlo, obtendrá ejemplo listo ventana emergente basada en jquery.
A todos nosotros deambulando por las extensiones. red global Me encontré con sitios que, al cargarlos inmediatamente o con un retraso de unos segundos, aparecían con diferente contenido, ya fuera solo un anuncio, un anuncio de un producto, un formulario de suscripción o un formulario. comentario.
Puede tener diferentes actitudes hacia estos métodos de presentación de información. Por ejemplo, todas estas ventanas emergentes que aparecen al visitar un sitio son, por decirlo suavemente, molestas, pero lo que sea, simplemente me enfurecen, quiero irme inmediatamente, salir de este sitio, que es lo que hago en la mayoría de los casos. casos. Eso es todo navegadores modernos Sospechan de todo tipo de ventanas emergentes en la etapa inicial de carga de un sitio; simplemente las bloquean. Pero, como vemos, muchísimos webmasters implementan una forma tan intrusiva de presentar la información.
yo estaba más interesado lado técnico Problema y métodos para resolverlo. No tuve que inventar nada especial; todo fue inventado hace mucho tiempo y funciona muy bien. Hoy, junto a usted, analizaremos en detalle la forma más sencilla de implementar una ventana emergente al cargar un sitio, utilizando la magia de nuevas propiedades y muy poco para adormecer la vigilancia de los navegadores y tener control sobre el tiempo que aparece el bloque de información. .
Para empezar, sin salir de la caja, en una página de demostración especialmente preparada, puede consultar resultado final todo lo que haremos contigo. En el ejemplo, en la ventana emergente utilicé texto y un par de imágenes para mayor claridad. Luego podrás insertar lo que quieras en la ventana modal, lo principal es no exagerar)))).
marcado HTMLEl diseño de nuestra ventana emergente es extremadamente simple. solo necesitamos dos elemento de bloque div con identificadores de identificación, para vincular a javascript y formar la apariencia usando estilos CSS. El elemento es responsable de la posición, el color de fondo, la transparencia y el grado de oscurecimiento cuando se abre la ventana emergente. El contenido de la ventana modal se colocará dentro del contenedor. También debemos proporcionar un enlace para cerrar la ventana. Para ejemplo claro Coloquemos un título simple y un par de párrafos de contenido de texto. Al final lo conseguiremos marcado completo Nuestra ventana se parece a esto:
¡Ventana modal! 
|
¡Ventana modal!
El ancho de la ventana modal se establece como un porcentaje, dependiendo del ancho del contenedor principal, en en este ejemplo Esta es la atenuación del fondo.
Es posible utilizar miniaturas integradas ubicadas a la izquierda o a la derecha en un contenedor div separado con una clase dedicada .pl-left y .pl-right, respectivamente.
El tamaño del bloque de miniaturas también se determinó en términos porcentuales (25%), brindando así la posibilidad de un cambio proporcional cuando se ve en las pantallas de varios dispositivos de usuario.
La animación de apariencia más simple cambiando la propiedad de transparencia (opacidad) de 0 a 1
Para que la ventana no aparezca inmediatamente cuando se carga el sitio, sino con un retraso de varios segundos, utilizamos un pequeño javascript y con su ayuda podremos ajustar el tiempo de aparición de la ventana emergente. Todos los navegadores reaccionarán con calma ante esta situación y no bloquearán el funcionamiento del script y, por tanto, la apariencia misma de la ventana emergente. Pega esto javascript es mejor justo al final del cuerpo paginas html antes de la etiqueta de cierre. Bueno, el guión en sí consta de sólo unas pocas líneas:
| < script type= "text/javascript" >var retardo_popup = 5000; |
setTimeout("document.getElementById("overlay").style.display="block"", delay_popup);
var retardo_popup = 5000;
setTimeout("document.getElementById("overlay").style.display="block"", delay_popup); En el ejemplo, el tiempo de aparición de la ventana se establece en 5000, lo que corresponde a aproximadamente 5 segundos; puede ingresar cualquier otro valor; Para cerrar la ventana simplemente usamos botón estándar, una etiqueta con un evento onclick y
| < button class = "close" title= "una cierta clase" onclick= "document.getElementById("overlay").style.display="none";" > |
class="close", por la capacidad de diseñar la apariencia usando estilos CSS.
CercaAsí llegamos al momento más interesante (en mi opinión), la formación de estilos de ventanas emergentes.< script type= "text/javascript" src= "js/jquery.cookie.js" >
Estilos CSS Primero, creemos un identificador #overlay con el que conectaremos nuestra ventana con javascript y crearemos un contenedor básico. jQuery se conecta desde el fondo almacenamiento de google, o puede descargar desde el sitio
complementos de jQuery y colóquelo en su sitio web en la carpeta “js” (por ejemplo). A continuación, conecte
| < script type= "text/javascript" >$(function () ( // Verifica la entrada en cookies sobre la visita // Si hay una entrada, no pasa nada if (! $. cookie("hideModal") ) ( // si la cookie no está configurada, aparece una ventana aparecerá // con un retraso de 5 segundos var delay_popup = 5000 ; setTimeout("document.getElementById("parent_popup").style.display="block"" , delay_popup) ; cookie("hideModal" , true , ( // El tiempo de almacenamiento de cookies en días vence: 7, ruta: "/" ) ); |
$(function() ( // Verifica la entrada de la cookie sobre la visita // Si hay una entrada, no pasa nada if (!$.cookie("hideModal")) ( // si la cookie no está configurada, aparecerá una ventana aparece // con un retraso de 5 segundos var delay_popup = 5000; setTimeout("document.getElementById("parent_popup").style.display="block"", delay_popup ) $.cookie("hideModal", true, ( // El tiempo de almacenamiento de cookies en días vence: 7, ruta: "/" ));
Es mejor colocar el js ejecutable antes de la etiqueta de cierre. En este ejemplo mostré la opción guardando galletas Después de cerrar la ventana emergente durante siete días, esto significa que la ventana se mostrará al usuario en su primera visita, una vez. Durante los próximos siete días, o hasta que el usuario borre las cookies de su navegador, la ventana no aparecerá.
Como comprenderá, puede vincular el controlador de eventos de escritura de cookies a cualquier otro elemento. Establezca el tiempo de almacenamiento de las cookies para que caduque: 7 (en el ejemplo es 7 días). Usted ajusta el retraso de la aparición de la ventana en la función setTimeout; de forma predeterminada, está configurado en 5000, es decir, la ventana aparecerá 5 segundos después de que se cargue la página.
Entonces, cambié ligeramente la apariencia de la ventana modal, la arruiné animacion sencilla apariencia, cambiando la propiedad de transparencia (opacidad) de 0 a 1. A la demostración, también agregué una opción para una ventana emergente con una entrada de cookie al visualizar, no olvide que la ventana en esta opción aparece una vez cada; 7 días, así que borra las cookies) )).
En cuanto al diseño:
Ejemplos de creación de ventanas modales, esparcidas por últimamente así que echa un vistazo, elige el estilo que más te guste y crea, crea...
Ahora espero estar seguro: ¡eso es todo!
Saludos cordiales, Andrey.
