jqueryui dialog return to previous window position after closing

Question

I have a series of jQuery dialog boxes, some which contain a lot of information. When the dialog box opens, the page scrolls to display the bottom of the dialog box. Also, these dialog boxes can only be closed by buttons at the bottom, sometimes hiding information at the very top of the dialog.

I have two issues I'd like to resolve:

• When a long dialog is opened, I'd like to prevent the forced scroll to the bottom.

• When the dialog is closed, I'd like to return to the position the page was at before the dialog was opened.

      //Code added due to StackOverflow requirement
      $dialog = $(this).next('.dialog-content').dialog({
      closeOnEscape: false,
      open: function (event, ui) {
          $(".ui-dialog-titlebar-close").hide();
          //it's almost as if I need a beforeOpen function
      },
      . . .
  

Here's a jFiddle of how I'm accomplishing the dialog construction, and the first problem above: http://jsfiddle.net/rjezB/3/

To see the second problem, scroll down a bit in the page, then open the dialog. I'd like to return to the same scrolled position, instead of the top of the page again.

Any pointers are greatly appreciated.

Answer 1

The issue is because of jQuery UI Dialog's built in autofocus function:

You can prevent this by executing this function before you call dialog.

$.ui.dialog.prototype._focusTabbable = function(){};

Which redefines the focus functionality to be an empty function.

Your example with the added code:

http://jsfiddle.net/rjezB/4/