2012-05-17 40 views
10

Tôi muốn tạo lớp lớp phủ bật lên nếu người dùng nhấp vào liên kết 'trợ giúp' hiển thị mẹo trợ giúp (rất có thể là hình ảnh .png) chỉ ra các yếu tố của trang web.Mẹo Trợ giúp Lớp phủ với jQuery

Tôi đã thấy điều này được thực hiện trên các trang web khác (mặc dù hiện tại tôi không thể tìm thấy trang web), nhờ đó có lớp phủ nửa trong suốt trên toàn bộ trang nhờ đó các mẹo trợ giúp được hiển thị. Sau đó tôi muốn lớp phủ biến mất nếu người dùng nhấp hoặc nhấp vào nút 'đóng'.

Tôi hiểu rằng có rất nhiều để hỏi, nhưng nếu có ai có thể chỉ cho tôi đi đúng hướng, hoặc đến một hướng dẫn trực tuyến, vv Tôi muốn REALLY đánh giá cao nó :)

Dưới đây là một ví dụ về hiệu lực thi hành tôi muốn tạo ra trên trang web của tôi: jquery overlay website help tips

Trả lời

8

Hãy xem Impromptu Plugin

http://trentrichardson.com/Impromptu/

+0

Tôi thích tính năng 'du lịch' ở phía dưới, nhưng nó dường như không để cung cấp cho bạn đánh dấu cần thiết để triển khai? (hoặc tôi thiếu một cái gì đó?) – adamdehaven

+0

Impromptu Tour là chính xác những gì tôi muốn. Bây giờ tôi đang gặp một vấn đề khác mặc dù ... xem tại đây: http://stackoverflow.com/questions/10653471/css-overlay-effect-exclude-certain-container – adamdehaven

+1

Nếu bạn đang tìm kiếm các plugin du lịch, tôi khuyên bạn nên plugin [jQuery Joyride trang web du lịch] của Zurb (http://zurb.com/playground/jquery-joyride-feature-tour-plugin). Nếu không @ guilleva của câu trả lời là chính xác những gì bạn đang tìm kiếm! – colllin

0

Âm thanh như bạn đang tìm kiếm cái gì đó như Colorbox

1

Trước tiên, bạn sẽ phải tìm hiểu cách tạo lớp phủ . Điều đó dễ thực hiện với một chút CSS cơ bản.

Công cụ hiển thị nội dung trợ giúp (hình ảnh PNG) của bạn sẽ được chứa bên trong phần tử lớp phủ (có lẽ hầu hết là div). Bạn sẽ phải định vị chúng xung quanh, và bạn có thể chọn để làm điều đó với CSS tinh khiết, hoặc sử dụng một cái gì đó như trợ giúp Position jQuery UI để giúp bạn ra ngoài.

Cuối cùng, bạn sẽ cần một chút Javascript/jQuery để bắt đầu chuyển đổi lớp phủ. Bạn muốn đọc lên on events in jQuery. Có lẽ, bạn sẽ được gắn vào click.

+0

Nếu bạn không hiểu, tôi sẽ vui mừng giải thích thêm một chút. Những người khác đang đề xuất các plugin; Tôi đang cố gắng cho bạn biết làm thế nào để làm điều đó cho mình. –

Các vấn đề liên quan