2012-05-17 16 views
10

Chciałbym utworzyć warstwę nakładki, która wyświetli się, gdy użytkownik kliknie link "Pomoc" wyświetlający wskazówki pomocy (najprawdopodobniej obraz .png) wskazujący elementy witryny.Wskazówki dotyczące nakładki nakładkowej z jQuery

Widziałem to na innych stronach internetowych (chociaż obecnie nie mogę tego znaleźć), w których na całej stronie znajduje się półprzezroczysta nakładka, w której wyświetlane są wskazówki pomocy. Chciałbym, aby nakładka zniknęła, gdy użytkownik kliknie lub kliknie przycisk "zamknij".

Rozumiem, że jest dużo pytać, ale jeśli ktoś może wskazać mi w dobrym kierunku, albo samouczek elektroniczny itp ja naprawdę doceniam to :)

Oto przykład z efekt Chcę utworzyć na mojej stronie internetowej: jquery overlay website help tips

Odpowiedz

8

Spójrz na wtyczce Impromptu

http://trentrichardson.com/Impromptu/

+0

Lubię funkcję „wycieczek” na dole, ale nie wydaje się dać ci znaczniki potrzebne do wdrożenia? (lub czy coś mi brakuje?) – adamdehaven

+0

Impromptu Tour jest dokładnie tym, czego chciałem. Teraz mam inny problem ... zobacz tutaj: http://stackoverflow.com/questions/10653471/css-overlay-effect-exclude-certain-container – adamdehaven

+1

Jeśli szukasz wtyczek wycieczek, bardzo polecam Zurb's [wtyczka do przeglądarki jQuery Joyride] (http://zurb.com/playground/jquery-joyride-feature-tour-plugin). W przeciwnym razie odpowiedź @ guilleva jest dokładnie tym, czego szukasz! – colllin

1

Najpierw musisz nauczyć się tworzyć nakładkę . Łatwo to zrobić przy odrobinie elementarnego CSS.

Rzeczy, które pokazują pomoc (twoje obrazy PNG), zostaną umieszczone wewnątrz elementu nakładki (prawdopodobnie jest to div). Będziesz musiał je rozmieścić i możesz to zrobić za pomocą czystego CSS lub użyć czegoś, na przykład pomocnika JQuery UI, który pomoże ci wyjść.

Wreszcie, będziesz potrzebować trochę Javascript/jQuery, aby rozpocząć przełączanie nakładki. Chcesz przeczytać on events in jQuery. Najprawdopodobniej będziesz załączać na click.

+0

Jeśli tego nie zrozumiesz, z przyjemnością wytłumaczę to nieco więcej. Inne sugerują wtyczki; Próbuję ci powiedzieć, jak zrobić to samemu. –

Powiązane problemy