Изменение цвета фона и прозрачности при добавлении «модального div»

Question

У меня есть страница, которая в какой-то момент показывает скрытый div и добавляет форму для ввода некоторых данных. Вы можете назвать это модальным div, возможно.

Что я хочу сделать, так это затенить все остальное и разрешить взаимодействие только с упомянутым div. Я хочу, чтобы фон был серым и прозрачным.

Какова лучшая стратегия для этого? Добавляете изображение и растягиваете его каким-то образом и делаете его прозрачным? Можно ли сделать так, чтобы это изображение перехватывало все события, которые заканчиваются за пределами моей формы div? Как это сделать?

Любой другой, лучший способ?

Я использую jquery, так что лучше всего, если я смогу установить для этого любой jquery api.

Answer 1

Это на самом деле не так уж сложно.Это можно сделать в одну или две строки:

/* initialize it */
$(document.body).append("<div id='shadow' style='position:fixed;left:0px;top:0px;width:100%; height:100%; background:black;'></div>").find("#shadow").hide();

/* show it */
$("#shadow").fadeTo(200,0.5);

/* hide it */
$("#shadow").fadeTo(200,0);

, затем просто убедитесь, что для формы задан z-индекс выше тени.

Answer 2

Вы можете сделать это с помощью Modal jQuery Dialog . Он затеняет фон и отключит редактирование на странице, за исключением диалога.

Answer 3

Сделайте, чтобы div перекрывал всю страницу.Этот div на 50% прозрачный и серый.Тогда ваш модальный div приходит поверх этого.

Дополнительная информация: Фрагменты: Howto Grey-Out The Screen