Как они делают этот полупрозрачный эффект наложения в javascript/jquery?

Если вы перейдете к http://learn.knockoutjs.com/, вы получите экран приветствия, который является полупрозрачным наложением, которое вводит пользователей на экран элементы. Это изящно.

Он немного похож на модуль блокировки jquery BlockUI, но я думаю, что это нечто более интересное. Fancybox приближается, но, кажется, предлагает только один элемент центра. Просмотр источника не помог мне, я не эксперт JS любыми средствами.

Кто-нибудь знает, как это делается или как сделать что-то подобное на странице?

Ответ 1

Стив использовал: http://trentrichardson.com/Impromptu/ для полей сообщений на страницах учебника.

Вам может понравиться это сообщение, в котором описываются инструменты с открытым исходным кодом, которые он использовал при создании learn.knockoutjs.com: http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/

Ответ 2

Быстро посмотрите на приведенный ниже пример:

http://jsfiddle.net/2q7xT/

Объяснение:

Это, вероятно, не лучшая реализация, но идея есть. Сначала вам понадобится <div>, который вы заполните либо полупрозрачным черным изображением:

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

Я использовал технику RGBA, но не поддерживался всеми браузерами.

Второе решение - заполнить div черным цветом, например:

background-color: #000;

а затем используйте кросс-браузерный атрибут opacity css, чтобы уменьшить непрозрачность:

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

Самая важная часть состоит в том, что этот div должен иметь position: fixed; и a z-index ниже, чем z-index элемента над ним.

Ответ 3

Это называется лайтбокс, или модальный ящик. Есть несколько классных плагинов jQuery lightbox. Вот несколько:

Я предлагаю FancyBox или ColorBox для того, что вы пытаетесь сделать. FancyBox - мой любимый.

Вот 10 лучших jQuery modalbox-плагинов: Топ-10 плагинов Modal Box jQuery

Примечание. Использование только CSS для диалога (другой ответ предложил сделать так) не так уж и хорошо, так как вы не сможете совершать быстрые переходы, и вы не сможете закрыть его кнопкой или ссылку.

Я надеюсь, что это будет полезно.

Ответ 4

Да, это похоже на плагин jquery ui dialog. Я действительно занимаюсь созданием чего-то подобного, и я понимаю, что эти диалоги ui довольно настраиваемы. Вот базовое учебное пособие, которое я нашел на youtube http://www.youtube.com/watch?v=b16V25eNyJY. Надеюсь, это поможет.

Ответ 5

Glinkot. Если вы посмотрите на исходный код веб-страниц, он даст вам такой div:

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

оттуда вы можете просто наложить якорь или что-то еще