jQuery UI modal dialog: how to scroll dialog window without scrolling main window?

Question

jQuery UI modal dialog.

If dialog height more than main window height we can scroll down through this dialog, but also main window scrolls too behind it (on the background).

Is it possible to make main window fixed while dialog is opened and scrolling down?

Thanks!

Answer 1

You could try this:

$('#yourDialog').hover(function(){

  // on hover

  $('body').css({'overflow':'hidden'});

}, function(){

  // off hover

  $('body').css({'overflow':'visible'});

});

Answer 2

For anyone else searching for an answer to this question, this post provides the following as an answer:

    create: function(event, ui) {
      $("body").css({ overflow: 'hidden' })
     },
     beforeClose: function(event, ui) {
      $("body").css({ overflow: 'inherit' })
     }

Also, make sure the height or maxHeight option is set in the dialog or else it will not display scrollbars.