JS всплывающий элемент для затемнения окружающего сайта

Question

Я не совсем уверен, как описать, что я хочу сделать, но я уверен, что видел это на многих сайтах раньше.

По сути, когда кто-то нажимает на ссылку, на нем должен отображаться элемент, содержащий некоторый текст и затемняющий остальную часть сайта, так что фокус пользователя направлен на этот элемент. Он также не должен позволять пользователям щелкать в затемненной области, поскольку уведомление должно быть подтверждено, прежде чем оно будет отправлено.

Я использую jQuery на своем сайте, поэтому я рад использовать его, если это будет проще.

Answer 1

Диалоговое окно пользовательского интерфейса jQuery будет использовать полупрозрачный фон при открытии в модальном режиме.

html:

<div id='test' title='test'>Test!</div>

javascript:

$('#test').dialog({modal: true});

Демо здесь

Answer 2

Взгляните на этот плагин для jQuery, он делает именно то, что вы хотите:)

http://dev7studios.com/demo/jquery-spotlight/

Что приятно.

Answer 3

добавить дополнительный 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);
......

Answer 4

Мой личный фаворит shadowbox.js

Answer 5

Полагаю, вы хотите использовать для этого colorbox.(Лайтбокс).

http://colorpowered.com/colorbox/core/example1/index.html

или вы можете попробовать плагин Boxy Lightbox.

http://onehackoranother.com/projects/jquery/boxy/

Answer 6

Я пойду вперед и добавлю свои два цента на этот.Мой модальный плагин jQuery - jqModal.Стоит также проверить

http://dev.iceburg.net/jquery/jqModal/

Answer 7

Его часто называют «лайтбоксом». Я использую плагин под названием nyroModal , который действительно гибкий и имеет широкую поддержку браузера.