JS открывают элемент для потускнения окружающего сайта
Я не действительно уверен, как описать то, что я хочу сделать, но я уверен, что видел его на многих сайтах прежде.
В основном, когда кто-то нажимает на ссылку, она должна показать элемент, который содержит некоторый текст и уменьшает остальную часть сайта так, чтобы пользователи сфокусировались, направлен к элементу. Это не должно позволять пользователям нажать в недоступной области также, потому что для уведомления нужно подтверждение, прежде чем это пойдет.
Я использую jQuery на своем сайте, таким образом, я рад использовать это, если это было бы легче.
7 ответов
диалоговое окно jQuery UI виджет будет использовать «полупрозрачный» фон при открытии в «модальном» режиме.
html:
<div id='test' title='test'>Test!</div>
javascript:
$('#test').dialog({modal: true});
Демо здесь
добавить дополнительный div для покрытия содержимого. Маска должна располагаться поверх всех элементов, кроме всплывающего элемента управления. Используя приведенный ниже код jquery, можно добиться этой функциональности. Предполагая, что новый добавленный элемент управления (div) имеет id = 'mask'
.........
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.5);
......
Взгляните на этот плагин для jQuery, он делает именно то, что вы хотите :)
http://dev7studios.com/demo/jquery-spotlight/
Что приятно.
Думаю, вы хотите использовать для этого colorbox. (Лайтбокс).
http://colorpowered.com/colorbox/core/example1/index.html
или вы можете попробовать плагин Boxy Lightbox.
Его часто называют "лайтбоксом". Я использую плагин под названием nyroModal, который действительно гибкий и имеет широкую поддержку браузеров.
Я тоже вставлю свои два цента в этот вопрос. Я предпочитаю jQuery модальный плагин jqModal. Стоит также проверить