Jquery modal dialogs DISABLE the scrollbars

问题:

As you can see on this link, http://jsbin.com/ozapol/9 ,

Jquery disables the scrollbars on some versions of IE and the latest version of chrome. (I didnt try any other yet...)

Is there a way to keep scrollbars enabled to be able to scroll through a long long dialog ?

Thank you ! Bye

Nice solution for Internet Explorer (Thanks to jk.)

html {overflow-y : scroll}

Brutal workaround for Chrome (Thanks to jk.)

On Chrome, JqueryUI Hijacks mouse events on the scrollbars. This looks like a bug that is referred in the links above. In order to remove those bindings, you have to unbind events each time you create a modal dialog :

$("#longdialog").dialog({
     open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
   modal:true
});

There is the final example : http://jsbin.com/ujagov/2

Links to bug reports :

1. http://bugs.jqueryui.com/ticket/4671
2. http://wiki.jqueryui.com/w/page/34725121/Visual-Test-Page-Cleanup

回答1:

You can keep scrollbars enabled with:

html {overflow-y: scroll;}

You could add that CSS programmatically so it doesn't affect every page of the site and possibly the design.

And, you may have to unbind the mouse events that the modal dialog hijacks:

$("#longdialog").dialog({
     open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
   modal:true
});

See Scrollbar problem with jQuery UI dialog in Chrome and Safari

回答2:

This bug fixed at jQueryUi-1.10. Here is link with the issue http://bugs.jqueryui.com/ticket/4671.

回答3:

Add following code to your css-file:

 .ui-dialog .ui-dialog-content {
    overflow-y: scroll;

 }
 #longdialog{
    height: 450px;

 }

The overflow doesn't work because the height was set to auto, define a specific height to the container div

回答4:

If you don't want to or can't upgrade to jQuery UI 1.10, this is the solution for you:

https://stackoverflow.com/a/7740756/354756