Если вы перейдете к http://learn.knockoutjs.com/, вы получите экран приветствия, который является полупрозрачным наложением, которое вводит пользователей на экран элементы. Это изящно.
Он немного похож на модуль блокировки jquery BlockUI, но я думаю, что это нечто более интересное. Fancybox приближается, но, кажется, предлагает только один элемент центра. Просмотр источника не помог мне, я не эксперт JS любыми средствами.
Кто-нибудь знает, как это делается или как сделать что-то подобное на странице?
Стив использовал: http://trentrichardson.com/Impromptu/ для полей сообщений на страницах учебника.
Вам может понравиться это сообщение, в котором описываются инструменты с открытым исходным кодом, которые он использовал при создании learn.knockoutjs.com: http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/
Быстро посмотрите на приведенный ниже пример:
Объяснение:
Это, вероятно, не лучшая реализация, но идея есть. Сначала вам понадобится <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 элемента над ним.
Это называется лайтбокс, или модальный ящик. Есть несколько классных плагинов jQuery lightbox. Вот несколько:
Я предлагаю FancyBox или ColorBox для того, что вы пытаетесь сделать. FancyBox - мой любимый.
Вот 10 лучших jQuery modalbox-плагинов: Топ-10 плагинов Modal Box jQuery
Примечание. Использование только CSS для диалога (другой ответ предложил сделать так) не так уж и хорошо, так как вы не сможете совершать быстрые переходы, и вы не сможете закрыть его кнопкой или ссылку.
Я надеюсь, что это будет полезно.
Да, это похоже на плагин jquery ui dialog. Я действительно занимаюсь созданием чего-то подобного, и я понимаю, что эти диалоги ui довольно настраиваемы. Вот базовое учебное пособие, которое я нашел на youtube http://www.youtube.com/watch?v=b16V25eNyJY. Надеюсь, это поможет.
Glinkot. Если вы посмотрите на исходный код веб-страниц, он даст вам такой div:
<div id="seeThru" style="opacity: .75; height: 100%; width: 100%"></div>
оттуда вы можете просто наложить якорь или что-то еще