jQuery Scrollbars not showing_问答_开发者_运维开发者技术经验分享

I am having a problem whereby the scrollbars on my jquery dialog are not showing up even though the content is very much larger than the dialog window.

Does anyone know what is wrong?

Here is the dialog initialisation code:

$("#divFoo").dialog({
autoOpen: false,
modal: true,
height: 500,
width: 500,
closeText: '',
position: 'center',
draggable: true,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

Here is how i am opening it:

$("#divFoo").dialog("open");

Here is the CSS from the stylesheet:

#divFoo
{
    display:none;
}

Here is the HTML div:

<div id="divFoo">
    <table id="tableFoo" cellpadding="5" cellspacing="5">
        <tr>                
            <td id="tdPP01"><img id="imgPP01" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP02"><img id="imgPP02" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP03"><img id="imgPP03" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP04"><img id="imgPP04" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP05"><img id="imgPP05" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP06"><img id="imgPP06" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP07"><img id="imgPP07" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP08"><img id="imgPP08" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP09"><img id="imgPP09" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP10"><img id="imgPP10" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP11"><img id="imgPP11" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP12"><img id="imgPP12" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP13"><img id="imgPP13" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP14"><img id="imgPP14" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP15"><img id="imgPP15" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP16"><img id="imgPP16" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP17"><img id="imgPP17" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP18"><img id="imgPP18" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP19"><img id="imgPP19" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP20"><img id="imgPP20" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP21"><img id="imgPP21" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP22"><img id="imgPP22" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP23"><img id="imgPP23" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP24"><img id="imgPP24" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP25"><img id="imgPP25" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP26"><img id="imgPP26" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP27"><img id="imgPP27" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP28"><img id="imgPP28" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP29"><img id="imgPP29" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP30"><img id="imgPP30" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP31"><img id="imgPP31" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP32"><img id="imgPP32" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP33"><img id="imgPP33" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP34"><img id="imgPP34" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP35"><img id="imgPP35" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP36"><img id="imgPP36" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP37"><img id="imgPP37" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP38"><img id="imgPP38" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP39"><img id="imgPP39" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP40"><img id="imgPP40" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP41"><img id="imgPP41" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP42"><img id="imgPP42" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP43"><img id="imgPP43" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP44"><img id="imgPP44" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP45"><img id="imgPP45" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP46"><img id="imgPP46" src="/images/foo.jpg" alt="" /></td>
  开发者_JS百科          <td id="tdPP47"><img id="imgPP47" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP48"><img id="imgPP48" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP49"><img id="imgPP49" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP50"><img id="imgPP50" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP51"><img id="imgPP51" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP52"><img id="imgPP52" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP53"><img id="imgPP53" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP54"><img id="imgPP54" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP55"><img id="imgPP55" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP56"><img id="imgPP56" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP57"><img id="imgPP57" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP58"><img id="imgPP58" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP59"><img id="imgPP59" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP60"><img id="imgPP60" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP61"><img id="imgPP61" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP62"><img id="imgPP62" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP63"><img id="imgPP63" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP64"><img id="imgPP64" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP65"><img id="imgPP65" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP66"><img id="imgPP66" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP67"><img id="imgPP67" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP68"><img id="imgPP68" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP69"><img id="imgPP69" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP70"><img id="imgPP70" src="/images/foo.jpg" alt="" /></td>
        </tr>
        <tr>
            <td id="tdPP71"><img id="imgPP71" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP72"><img id="imgPP72" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP73"><img id="imgPP73" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP74"><img id="imgPP74" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP75"><img id="imgPP75" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP76"><img id="imgPP76" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP77"><img id="imgPP77" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP78"><img id="imgPP78" src="/images/foo.jpg" alt="" /></td>
            <td id="tdPP79"><img id="imgPP79" src="/images/foo.jpg" alt="" /></td>
        </tr>
    </table>   
</div>

Try setting the style of #divFoo to have overflow:false and also add resizable: 'false' to dialog initialization.