jQuery: Как я могу создать простое наложение?
4 ответа
Проще говоря, оверлей представляет собой div , который остается фиксированным на экране ( независимо от того, прокручиваете ли вы) и имеет какую-то непрозрачность.
Это будет ваш CSS для кроссбраузерной непрозрачности 0,5:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
}
Это будет ваш код jQuery (пользовательский интерфейс не нужен). Вы просто собираетесь создать новый элемент с идентификатором #overlay. Создание и уничтожение DIV должно быть всем, что вам нужно.
var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)
По соображениям производительности вы можете захотеть скрыть DIV и настроить отображение на блокировку и без , как вам нужно это или нет.
Надеюсь, это поможет!
Изменить: Как хорошо выразился @Vitaly, обязательно проверьте свой DocType. Подробнее в комментариях к его открытиям ..
Что вы собираетесь делать с оверлеем? Если он статический, скажем, простой прямоугольник, перекрывающий некоторый контент, просто используйте абсолютное позиционирование с помощью CSS. Если он динамический (я считаю, что это называется лайтбокс), вы можете написать код jQuery, изменяющий CSS, чтобы отображать / скрывать оверлей по запросу.
Если вы уже используете jquery, я не понимаю, почему вы также не сможете использовать легкий плагин наложения. Другие люди уже написали несколько хороших примеров на jquery, так зачем заново изобретать колесо?
Под наложением вы имеете в виду контент, который перекрывает / покрывает остальную часть страницы? В HTML вы могли бы сделать это, используя div, который использует абсолютное или фиксированное позиционирование. Если нужно было сгенерировать динамически, jQuery мог бы просто сгенерировать div с соответствующим стилем позиции.