2012-05-17 13 views
10

Me gustaría crear una capa de superposición que aparece si un usuario hace clic en un enlace de "ayuda" que muestra sugerencias de ayuda (muy probablemente una imagen .png) señalando elementos del sitio web.Consejos de ayuda de superposición con jQuery

He visto esto hecho en otros sitios web (aunque actualmente no puedo encontrar uno) mediante el cual hay una superposición semitransparente en toda la página donde se muestran sugerencias de ayuda. Entonces me gustaría que la superposición desaparezca si el usuario hace clic o hace clic en el botón "Cerrar".

entiendo que es mucho pedir, pero si alguien me podría apuntar en la dirección correcta, o para un tutorial en línea, etc. Apreciaría realmente :)

Aquí está un ejemplo de la efecto que quiero crear en mi sitio web: jquery overlay website help tips

Respuesta

8

Tome un vistazo a Impromptu complemento

http://trentrichardson.com/Impromptu/

+0

me gusta la función de 'paseo' en la parte inferior, pero no parece para darle la marca necesaria para implementar? (¿O me falta algo?) – adamdehaven

+0

Impromptu Tour es exactamente lo que quería. Ahora estoy teniendo otro problema ... vea aquí: http://stackoverflow.com/questions/10653471/css-overlay-effect-exclude-certain-container – adamdehaven

+1

Si está buscando complementos para giras, lo recomiendo encarecidamente. El plugin [jQuery Joyride website tour plugin] de zurb (http://zurb.com/playground/jquery-joyride-feature-tour-plugin). De lo contrario, ¡la respuesta de @ guilleva es exactamente lo que estás buscando! – colllin

0

Suena como que busca algo así como Colorbox

1

Primero tendrá que aprender cómo crear una superposición . Eso se hace fácilmente con un poco de CSS elemental.

Las cosas que muestran las cosas de ayuda (sus imágenes PNG) van a estar contenidas dentro del elemento de superposición (que probablemente sea div). Tendrás que posicionarlos, y puedes elegir hacerlo con CSS puro, o utilizar algo como el ayudante de jQuery UI Position para ayudarte.

Por último, vas a necesitar un poco de Javascript/jQuery para iniciar el alternar de la superposición. Quiere leer on events in jQuery. Lo más probable es que te adjuntas al click.

+0

Si no lo entiende, me complacerá explicarlo un poco más. Los otros están sugiriendo complementos; Estoy tratando de decirte cómo hacerlo tú mismo. –

Cuestiones relacionadas