Simplemodal Scroll Bar and Close Image Issue

Question

I have a simplemodal jquery popup that has to have overflow set to auto because the resulting list can be long. The scroll bars show up fine, but the close image gets shoved behind the vertical scroll bars and the simplemodal border. If I comment out the

overflow: 'auto',

line the close image shows up fine over the top of the border. I have tried setting the z-index for the image really high and that did nothing. It also makes horizontal scroll bars show up because the close image is behind the vertical scroll bars.

My jquery code is

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
                    });

And my css is

#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;
}

Any help on how to fix this would be appreciated.

Answer 1

SimpleModal should be automatically adding overflow:'auto' to the simplemodal-wrap div if your data extends the container. If for some reason it is not (due to how you are using it), you could do something like:

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
});