Làm cách nào để thực hiện hiệu ứng lớp phủ bán trong suốt này trong javascript/jquery?

Question

Nếu bạn điều hướng đến http://learn.knockoutjs.com/, bạn sẽ có màn hình kiểu 'chào mừng' là lớp phủ nửa trong suốt giới thiệu người dùng đến các yếu tố màn hình. Nó tiện lợi.

Trông giống như plugin BlockUI jquery, nhưng tôi nghĩ nó hơi lạ hơn thế. Fancybox đến gần, nhưng dường như chỉ cung cấp một yếu tố trung tâm duy nhất. Xem nguồn đã không giúp tôi nhiều, tôi không phải là một chuyên gia JS bởi bất kỳ phương tiện.

Có ai biết cách thực hiện việc này hoặc cách thực hiện điều gì đó tương tự trên một trang không?

Answer 1

Steve đã sử dụng: http://trentrichardson.com/Impromptu/ cho các hộp thư trên các trang hướng dẫn.

Bạn có thể thích bài này mô tả các công cụ mã nguồn mở rằng ông sử dụng trong việc tạo ra learn.knockoutjs.com: http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/

Answer 2

Có một cái nhìn lướt qua các ví dụ dưới đây:

http://jsfiddle.net/2q7xT/

Giải thích:

Đây có lẽ không phải là thực hiện tốt nhất nhưng ý tưởng là có. Trước tiên, bạn sẽ cần một <div> mà bạn sẽ lấp đầy với một trong hai hình ảnh đen bán trong suốt:

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

tôi đã sử dụng kỹ thuật RGBA nhưng nó không được hỗ trợ bởi tất cả các trình duyệt.

Giải pháp thứ hai là để lấp đầy div với một màu đen như:

background-color: #000; 

và sau đó sử dụng Cross-trình duyệt opacity css thuộc tính để giảm opacity:

/* 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; 

Nhất phần quan trọng là div này phải có position: fixed; và thấp hơn z-index so với z-index của phần tử ở trên nó.

Answer 3

vâng, nó trông giống như một plugin hộp thoại jquery ui. Tôi đã thực sự nhìn vào việc tạo ra một cái gì đó tương tự và đó là sự hiểu biết của tôi rằng các hộp thoại ui là khá tùy biến. Đây là hướng dẫn cơ bản tôi tìm thấy trên youtube http://www.youtube.com/watch?v=b16V25eNyJY. Hi vọng điêu nay co ich.

Answer 4

Đó được gọi là hộp đèn hoặc hộp phương thức. Có một số plugin jQuery lightbox thú vị. Dưới đây là một vài ví dụ:

1. FancyBox

2. ColorBox

3. LightView

Tôi đề nghị Fancybox hoặc hộp thuốc vẽ cho những gì bạn đang cố gắng làm. FancyBox là yêu thích của tôi.

Dưới đây là top 10 jQuery plugin modalbox: Top 10 jQuery Modal Box Plugins

Lưu ý: Chỉ sử dụng CSS cho một hộp thoại (câu trả lời khác đã gợi ý làm nó theo cách đó) mà không phải là tốt, vì bạn sẽ không có khả năng làm cho quá trình chuyển đổi mờ dần mát mẻ và bạn sẽ không thể làm cho nó gần gũi với một nút hoặc liên kết.

Tôi hy vọng điều này hữu ích.

Answer 5

Glinkot. Nếu bạn nhìn vào mã nguồn trang web nó mang lại cho bạn một div như thế này:

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

từ đó bạn có thể neo chỉ lớp phủ hoặc bất cứ điều gì khác