Suggerimenti per la guida in sovrapposizione con jQuery

Question

Vorrei creare un livello di sovrapposizione che si apre se un utente fa clic su un link "Guida" che visualizza i suggerimenti della guida (molto probabilmente un'immagine .png) che indicano gli elementi del sito Web.

Ho visto questo fatto su altri siti Web (anche se attualmente non riesco a trovarne uno) in cui vi è una sovrapposizione semitrasparente sull'intera pagina in cui vengono mostrati suggerimenti di aiuto. Vorrei quindi che la sovrapposizione sparisse se l'utente fa clic o fa clic su un pulsante "Chiudi".

Capisco che è un sacco di chiedere, ma se qualcuno mi potrebbe punto nella giusta direzione, o per un tutorial online, ecc mi piacerebbe davvero apprezzare :)

Ecco un esempio di effetto che voglio creare il mio sito web:

Answer 1

Date un'occhiata a Impromptu plug

http://trentrichardson.com/Impromptu/

Answer 2

Suona come siete alla ricerca di qualcosa di simile Colorbox

Answer 3

Per prima cosa devi imparare come creare una sovrapposizione . Questo è fatto facilmente con un po 'di CSS elementare.

Le cose che mostrano le informazioni di supporto (le immagini PNG) saranno contenute all'interno dell'elemento di sovrapposizione (che è probabilmente uno div). Dovrai posizionarli in giro, e puoi scegliere di farlo con puro CSS, o usare qualcosa come l'helper di jQuery UI Position per aiutarti.

Infine, avrete bisogno di un po 'di Javascript/jQuery per dare il via alla commutazione dell'overlay. Vuoi leggere on events in jQuery. Molto probabilmente, si sta per allegare il click.

Answer 4

Date un'occhiata a Chardin.js, è abbastanza piacevole e facile da implementare

Answer 5

Un altro buon plugin sembra essere Chardin http://heelhook.github.io/chardin.js/