Как создать окно лайтбокса в jQuery, которое будет заканчиваться в нижней части содержимого или показывать полосы прокрутки, если содержимое не подходит? - PullRequest
Новая
       22

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

1 голос
/ 06 декабря 2011

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

Может кто-нибудь дать мне несколько советов о том, как сделать так, чтобы полосы прокрутки появлялись в определенной части контента, если окно браузера не достаточно высоко, чтобы соответствовать контенту? Также потребуется настроить его размер в случае, если при загрузке страницы окно достаточно высоко, тогда, если пользователь сжимает окно, то вокруг определенной части контента появятся вертикальные полосы прокрутки.

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

Это должно работать в IE7 +.

1 Ответ

2 голосов
/ 06 декабря 2011

Предназначено для указанного поля отступа 100px, а также для поля в 100px между нижней частью элемента в его самом высоком и нижней части окна. Когда размер окна изменяется, функция выполняет итерацию дважды, если высота окна больше, чем у ранее сжатого лайтбокса (в этом случае его высота будет установлена ​​на «авто»), но в конечном итоге будет меньше, чем высота, на которой происходит ослабление недавно расширенного лайтбокса (в этом случае нам нужно снова сжать лайтбокс, чтобы соответствовать новой высоте окна). 

<div id="myLightBox">
    <div id="myScrollPane">

        <!-- Content here -->

    </div>
</div>
<script type="text/javascript">
function resizeLightBox(i)
{
    if (window.innerHeight < $('#myLightbox').height() + 200)
    {
        var newHeight = (window.innerHeight - 200) + 'px';
        $('#myLightBox').css('height', newHeight);
        $('#myScrollPane').css('height', newHeight);
        $('#myScrollPane').css('overflow-y', 'scroll');
    }
    else
    {
        $('#myLightBox').css('height', 'auto');
        $('#myScrollPane').css('height', 'auto');
        $('#myScrollPane').css('overflow-y', 'visible');
    }
    if (i > 0)
    {
        i--;
        resizeLightBox(i);
    }
}

window.onload = function(){resizeLightBox(1)};
window.onresize = function(){resizeLightBox(2)};
</script>
...