¿Cómo hacen este efecto de superposición semitransparente en javascript/jquery?

Si navega al http://learn.knockoutjs.com/ obtendrá una pantalla de estilo 'bienvenida' que es una superposición semitransparente que presenta a los usuarios los elementos de la pantalla. Es ingenioso.¿Cómo hacen este efecto de superposición semitransparente en javascript/jquery?

Parece un poco al plugin jquery BlockUI, pero creo que es algo un poco más elegante que eso. Fancybox se acerca, pero parece que solo ofrece un elemento central único. Ver la fuente no me ayudó mucho, no soy un experto en JS de ninguna manera.

¿Alguien sabe cómo se hace esto o cómo hacer algo similar en una página?

Fuente

2011-09-08 Glinkot

Steve usado: http://trentrichardson.com/Impromptu/ para los cuadros de mensaje en las páginas de tutoriales.

Es posible que como este post que describe las herramientas de código abierto que se utiliza en la creación de learn.knockoutjs.com: http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/

Fuente

2011-09-08 00:26:13

Gracias por eso. Responde exactamente mi pregunta (¡aunque en el blog señala que no le gustó ese complemento y lamenta usarlo!) Sin embargo, es bueno saberlo. Gracias. – Glinkot

echar un vistazo rápido en el siguiente ejemplo:

http://jsfiddle.net/2q7xT/

Explicación:

Esto probablemente no es la mejor aplicación, pero la idea está ahí. En primer lugar usted va a necesitar un <div> la que tiene que ser llenado ya sea con una imagen en negro semitransparente:

background: url(semi-transparent-image.png) repeat;

he utilizado la técnica de RGBA pero no es soportado por todos los navegadores.

La segunda solución es llenar el div con un color negro como:

background-color: #000;

y luego usar el Cross-browser opacity atributo css para reducir la opacidad:

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

/* IE 5-7 */ 
filter: alpha(opacity=50); 

/* Netscape */ 
-moz-opacity: 0.5; 

/* Safari 1.x */ 
-khtml-opacity: 0.5; 

/* Good browsers */ 
opacity: 0.5;

La mayor parte La parte importante es que este div debe tener position: fixed; y z-index menor que z-index del elemento que está sobre él.

Fuente

2011-09-08 00:19:04 Bassem

Gracias por ese enlace! – Glinkot

sí, parece un plugin de diálogo jquery ui. De hecho, he estado buscando crear algo similar y tengo entendido que esos cuadros de diálogo de la interfaz de usuario son bastante personalizables. Aquí hay un tutorial básico que encontré en youtube http://www.youtube.com/watch?v=b16V25eNyJY. Espero que esto ayude.

Fuente

2011-09-08 00:22:14 Scott

Lo comprobaré Scott, gracias. – Glinkot

Eso se llama una caja de luz, o, un cuadro modal. Hay varios plugins de jQuery lightbox geniales. Aquí están algunos:

Sugiero FancyBox o ColorBox por lo que estamos tratando de hacer. FancyBox es mi favorito.

Éstos son los 10 plugins jQuery modalbox: Top 10 jQuery Modal Box Plugins

Nota: Usando sólo CSS para un cuadro de diálogo (otra respuesta ha sugerido hacerlo de esa manera) no es muy bueno, ya que no será capaz de realice transiciones de desvanecimiento geniales y no podrá cerrarlas con un botón o un enlace.

Espero que esto sea útil.

Fuente

2011-09-08 00:25:00 Nathan

Buenos puntos. Me encontré con algunos de ellos, pero la "superposición de toda la página con varias secciones" no era obvia entre los ejemplos. Se necesitará algo de engaño: 0) Gracias por tu ayuda. – Glinkot

@Glinkot No hay problema :) – Nathan

Glinkot. Si nos fijamos en el código fuente de las páginas web que le da un div así:

<div id="seeThru" style="opacity: .75; height: 100%; width: 100%"></div>

desde allí se puede simplemente anclajes de superposición o cualquier otra cosa

Fuente

2013-08-21 17:55:16 JFakult

Si copia ese div solo en un documento HTML (y agrega las comillas dobles que faltan), no ocurre nada. – Seanny123

¿Cómo hacen este efecto de superposición semitransparente en javascript/jquery?

Respuesta

Cuestiones relacionadas