Простая модальная полоса прокрутки и закрытие изображения - PullRequest
Новая
       13

Простая модальная полоса прокрутки и закрытие изображения

0 голосов
/ 17 февраля 2011

У меня всплывающее окно simplemodal jquery, для которого переполнение должно быть установлено на auto, потому что результирующий список может быть длинным. Полосы прокрутки отображаются нормально, но близкое изображение оказывается за вертикальными полосами прокрутки и простой модальной границей. Если я закомментирую 

overflow: 'auto',

линия, при которой близкое изображение отображается поверх границы. Я попытался установить Z-индекс для изображения очень высоко, и это ничего не сделало. Кроме того, отображаются горизонтальные полосы прокрутки, поскольку близкое изображение находится за вертикальными полосами прокрутки.

Мой код jquery 

jQuery('#CustLookupResults').modal({
                        containerCss: {
                            padding: 0,
                            overflow: 'auto',
                            maxHeight: 800

                        },
                        onShow: function (dlg) {
                            $(dlg.container).css('width', 650);
                            $(dlg.container).css('height', 'auto');
                        },
                        overlayClose: true,
                        opacity: 75
                    });

И мой CSS 

#simplemodal-container
{
    border:8px solid;
    padding: 12px;
    border-color:Black;
    border-style:outset;
    background-color:White;
    color:Black;
    vertical-align:middle;
    text-align:center;
}

#simplemodal-container a.modalCloseImg {
    background:url(../images/x.png) no-repeat; /* adjust url as required*/
    width:25px;
    height:29px;
    display:inline;
    z-index:3200;
    position:absolute;
    top:-15px;
    right:-18px;
    cursor:pointer;
}

Буду признателен за любую помощь, как это исправить.

1 Ответ

3 голосов
/ 18 февраля 2011

SimpleModal должен автоматически добавлять overflow:'auto' в simplemodal-wrap div, если ваши данные расширяют контейнер.Если по какой-то причине это не так (из-за того, как вы его используете), вы можете сделать что-то вроде: 

jQuery('#CustLookupResults').modal({
    containerCss: {
        padding: 0,
        width: 650,
    },
    maxHeight: 800,
    onShow: function (dlg) {
        $(dlg.container).css('height', 'auto');
        $(dlg.wrap).css('overflow', 'auto'); // or try jQuery.modal.update();
    },
    overlayClose: true,
    opacity: 75
});
...