Создание модульного окна с прозрачной подложкой
10.14.2008 – Рубрика: HTML&CSS
Недавно у меня возникал необходимость создать модульное окно с прозрачной подложкой. То есть, что это означает. При клике по определенной ссылке выполняется отображения блока (модульного окна) а весь сайт при этом затемняется.
Из вариантов реализации есть способ, которым раньше было выполнена процедура авторизации на Хабре. То есть при клике на ссылку отображается нужный блок, а под ним находиться другой блок, который занимает всю область окна браузера и имеет фон в виде png рисунка с альфа-каналом с прозрачностью. Главный недостаток этого способа реализации в том, что Internet Explorer6 не поддерживает альфа-канал (полупрозрачность), для устранения этого есть ряд сторонних скриптов PNGfix, но недостаток в том, что нету пока скрипта который адекватно работал с повторяющимся бекграундом (если вы знаете такой, буду благодарен за подсказку) Я выбрал другой способ реализации. Он основан на свойстве CSS – opacity (прозрачность).
Согласно спецификации, это свойство должно задавать прозрачность любого элемента – блока, картинки, таблицы. Причем css прозрачность задается числовым значением в диапазоне от 0 до 1. 0 означает 100% прозрачность, то есть элемент невидимый, а 1 означает, что элемент полностью видимый.
Но с сss прозрачность не обошлось без загвоздок. СSS прозрачность беспрекословно понимаю сейчас такие браузеры – Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9. Для всех остальных нужно сплясать небольшой танец с бубном.
Ниже приводиться код, который позволяет задать прозрачность для всех браузеров. Для ие применяется филтр. Например, filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); эквивалетно opacity:0.5, только задано через Alpha DirectX фильтр. -moz-opacity: 0.5; для Mozilla 1.6 и ниже, -khtml-opacity: 0.5; для Konqueror 3.1, Safari 1.1.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
9 Отзывов to “Создание модульного окна с прозрачной подложкой”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 11 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 24 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 7 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 1 отзыв)
Октябрь 14, 2008 в 23:53
Относительно старые версии Opera не отрабатывают нормально прозрачность… сам укололся когда сдавал работу заказчику, а у него была Опера 8.5
Октябрь 15, 2008 в 8:49
Спасибо за сведения, возьму на заметку. Только вот Opera 8 сейчас используют 0.6% согласно Liveinternet… Как вариант можно придумать под оперу отдельную реализацию с png…
Октябрь 20, 2008 в 10:18
Opera 8 107,166 0.6%
Другие 106,663 0.6%
Firefox 1 97,726 0.5%
Explorer 5 66,332 0.3%
Explorer 8 58,127 0.3%
Mozilla 1 50,021 0.3%
Opera 7 22,990 0.1%
Safari 3 19,718 0.1%
Explorer 4 11,752 0.1%
Firefox 0.x 4,775 0.0%
Netscape 4 4,125 0.0%
Netscape 7 2,486 0.0%
Opera 6 1,377 0.0%
Netscape 3 1,196 0.0%
Netscape 8 1,070 0.0%
Explorer 1,023 0.0%
Safari 1 709 0.0%
Konqueror 3 219 0.0%
Opera 5 168 0.0%
за чем тогда писать свойство-khtml-opacity: 0.5 если в месяц в рунете этим браузером пользуется 219 человек?
Октябрь 20, 2008 в 10:27
А почему-бы и не написать? Ведь валидация от предыдущих свойств уже накрылась. Если можно покрыть максимум, почему бы не использовать это?
Октябрь 27, 2008 в 13:16
Пример не найден (404-ая).
Исправьте пожалуйста.
Октябрь 27, 2008 в 15:36
Спасибо за замечание, исправил.
Ноябрь 3, 2008 в 17:15
В Сафари все работает.
Март 4, 2009 в 23:30
По ссылки на пример снова ошибка 404, а на пример очень хочется посмотреть.
Май 19, 2010 в 10:50
да, что-то пример не показывается… а за урок и пояснения, спасибо! полезно! вообще, сайт мне нравится!