Случилось на днях решать своеобразную задачку – веб-страница при определенных обстоятельствах должна была показывать информационное окно, по сути div, причем все остальные контролы на страницы должны быть в этот момент неактивны. Такой себе аналог модального окна.
Первой мыслью было использовать компонент Dialog из JQuery UI. Но оказалось, что image map, который был на странице, почему-то продолжает работать при отображении диалога. Кроме того, возникло ощущение слишком тяжеловесного решения для такой простой задачи.
Следующей мыслью было накрыть всю страницу слоем с прозрачным (transparent) фоном, а сверху поместить окно. Оказалось, что только FF использует для прозрачных слоев нормальный твердый материал, через который контролы не нажимаются, а IE и Opera пользуются каким-то целлофаном, пропускающим нажатия.
В конце концов, на просторах Интернета нашлось рабочее решение, которое подходит для всех браузеров. Им оказалось использование свойства прозрачности (opacity). Таким образом, стили маскирующего слоя выглядят так:
display: none; // слой не отображается, пока его об этом не попросят
z-index: 100; // слой находится выше всех других, модальное окно должно быть еще выше position: absolute; // расположение слоя не зависит от того, что под ним
background-color: #ffffff; // цвет фона – белый
opacity: 0.3; // прозрачность для FF и Opera, страница станет немного более серая, параметр 0.3 можно менять
filter: alpha(opacity = 30); // прозрачность для IE
left: 0; // слой привязан к левому
top: 0 // верхнему углу
Чтобы теперь отобразить данный слой (div с id=donttouch), накрыв все что под ним, можно использовать следующий JavaScript-код (конечно же, если подключен jquery):
function mask() {
$(‘#donttouch’).height(document.body.scrollHeight).
width(document.body.scrollWidth).show()
}
03 октября 2008
Модальное окно: jquery + CSS
Подписаться на:
Комментарии к сообщению (Atom)
Комментариев нет:
Отправить комментарий