Попытка включить действительно простой световой короб.Как мне оставаться в центре прокрутки? - PullRequest
Новая
       9

Попытка включить действительно простой световой короб.Как мне оставаться в центре прокрутки?

1 голос
/ 13 сентября 2011

Работает над созданием очень старого сайта, так как новый сайт строится в другом месте и желает использовать сверхпростой дисплей типа лайтбокс, но не уверен, как заставить его работать.

Вот эта страница в том виде, как она есть:

http://www.onboardtraining.co.uk/johnboyce

При нажатии на 3 ряда машин справа вызывается функция javascript, построенная вокруг кода с этой страницы:

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

Единственное, что темный фоновый слой не полностью расширяется до 100%, даже если он говорит об этом внутри кода CSS, и фоновый слой, и слой контейнера не остаются фиксированными на экране, если посетитель прокрутил немного вниз, а затем щелкнул миниатюра слои появляются дальше вверх по странице и лишь частично покрывают экран, то же самое, если пользователь пытается прокрутить.

Наконец, хотя демонстрационный код работает нормально (исключая вышеприведенное) в IE, FF и Chrome, на iPhone лайтбокс выглядит смещенным влево.

Извините за огромный вопрос с множеством веток, просто изучаю мой взгляд на вещи CSS на данный момент и выхожу из темных веков:)

Спасибо

Rik

Редактировать - Я не хочу использовать какие-либо внешние плагины jquery, спасибо:)

Ответы [ 2 ]

2 голосов
/ 13 сентября 2011

Это самый простой метод: 

.black_overlay {
    position: fixed;
    _position: absolute;
}

position: fixed поддерживается во всех браузерах, кроме IE6, поддержка которых больше не относится к большинству веб-сайтов. _position: absolute применяется только в IE6 и останавливает разрыв страницы в этом браузере.

Вы должны оставить белое поле как есть (не делайте его position: fixed), потому что оно не соответствует самому размеру окна.

Понятия не имею об iPhone, часть вашего вопроса.

Во-первых, вы должны обновить ваш тип документа: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Это нехорошо, потому что это вызывает Причудливый режим . В частности, в Internet Explorer многие вещи просто не работают или полностью нарушаются в режиме Quirks. Обновите ваш доктайп до этого: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
0 голосов
/ 13 сентября 2011

Используйте этот плагин лайтбокса jquery:

http://leandrovieira.com/projects/jquery/lightbox/

...