AJAX
1649 сообщений
#16 лет назад
Такой вот интересный вопрос. Как создать кроссбраузерную затемнени.ю страницы?Вот как я сделал:
CSS--
#loading_ajax {
width:100%;
height:100%;
background-color:#000000;
filter:alpha(Opacity=50); opacity:0.5; -moz-opacity:0.5;
z-index:100000;
top: 0;
margin:0px;
position:absolute;
}
#loading_ajax_anim{
position:absolute;
top:48%;left:48%;
}HTML
<div id="loading_ajax"></div>
<div id="loading_ajax_anim"><img src="images/loading.gif"/></div>
<div id="page_content">content</div>
Но так как я делал, работает правильно если только страница не имеет сролл. При скролинге position:absolute ставит елемент затемнения сначало страницы а не окна браузера.
Можно конечно поставить position:fixed, но тогда не будет работать в IE6.
Хотелось бы это все сделать только c CSS.
Короче говоря, нужно зафиксировать объект в окне, чтоб он не менял свое положение при прокрутке.
3195 сообщений
#16 лет назад
Можно посмотреть как сделано в движке DLE, там вроде бы всё кореектно работает везде. Скачайте демо версию с сайта и посмотрите...
2195 сообщений
#16 лет назад
Одна из причин почему верстальщики оборачивают страницу в внешний div.Можно поступить так (но тогда loading_ajax_anim придется позиционировать иначе):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>test</title>
<style type="text/css">
* {margin:0;padding:0}
html, body {height:100%}
#page {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}
#loading_ajax {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
filter:alpha(Opacity=50);opacity:0.5;-moz-opacity:0.5;
z-index:100000;
}
</style>
</head>
<body>
<div id="page">
<div id="loading_ajax"></div>
<div id="page_content">content</div>
</div>
</body>
</html>
Многие скрипты же просто добавляют overflow:hidden для body. Вариантов много.
А вообще
Цитата:
Хотелось бы это все сделать только c CSS.
Если используется ajax - нет ничего страшного чтобы применить js для вычисления высоты, например.
1649 сообщений
#16 лет назад
Цитата ("Sir_Michael"):Если используется ajax - нет ничего страшного чтобы применить js для вычисления высоты, например.
Это понятно. Но хочется решить именно возможностями CSS.
За помощь спасибо. Попробую и скажу если работает.
626 сообщений
1649 сообщений
#16 лет назад
Это вариант. Но интегрировать jQuery только для этого фэйда, думаю не правильно.
5330 сообщений
#16 лет назад
Jquery влюбляет как только посмотришь все примеры галерей, скроллеров, гармошек и анимашек.