jQuery UI Modal Dialog should be fixed on scroll

Question

Is there any possibility to fix the modal window for jQuery UI, so when the user is using the scroller on the right side, the side behind scrolls, but the modal window is staying fix?

Answer 1

Create a css class with the fixed position:

.fixed-dialog{
  position: fixed;
  top: 50px;
  left: 50px;
}

Then append the class as part of the options when you create the dialog:

$( ".selector" ).dialog({ dialogClass: 'fixed-dialog' });

Here is a working Example: http://jsfiddle.net/3hrSv/ The example is not too flashy because I couldn't get jsfiddle to style the dialog.

If you would like to center the dialog in the middle of the screen try setting top:50%; left:50%; in your css as suggested by: http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 2

If you want all of your dialogs to have this behavior, you can modify your jquery.ui.dialog.css file.

Change:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

To:

.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; }

or, if you want to preserve the original file, just add the line:

div.ui-dialog {position:fixed;} 

to one of your css files referenced by the page, or the style block on the page.

Answer 3

Or to apply the CSS when you create it:

        $("#Modal").dialog({
        autoOpen: false,
        width: 500,
        height: 'auto',
        position: [50, 150],
        create: function (event) {
            $(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
          }
        });