jQuery Dialog使滚动条出现在主要内容中

Question

This test of jQuery dialog makes the scrollbars appear in the main content when the dialog is opened. When I touch the dialog resize, the scrollbars go away. Is it the way I defined the dialog or too much content? Click the [!] in the top right corner to see this. Platform: XPsp3, browsers: FF3.6.3, IE8, Safari 5 Thanks

Answer 1

See here for a couple different ways to approach: Opening a Modal Dialog shows a horizontal scroll bar

Quick CSS fix:

.ui-widget-overlay {
   position: fixed;  /* <---------- */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Or call this when you open your dialog:

open: function(event, ui){
    $('body').css('overflow-x', 'hidden');
}

Answer 2

Why has the dialog container div got the style property position set to relative , this should be absolute going by the jQuery UI demo .

When I change it to absolute in firebug the scrolbar problem resovles itself.