CODEWITHSUNDEEP
jqueryjquery-ui
nnikolay
nnikolay

Reputation: 1751

jQuery UI Modal Dialog should be fixed on scroll

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?

Upvotes: 24

Views: 37607

Answers (4)

Marin Popov
Marin Popov

Reputation: 263

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 });
          }
        });

Upvotes: 4

James
James

Reputation: 111

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.

Upvotes: 11

t_henderson
t_henderson

Reputation: 89

This is an old question, but I found that James' answer (to revise JQuery's div.ui-dialog to position:fixed) provided one-half of the answer to this question. The other half is this: Be sure that the height of the parent element is 100%. In my case, the body is the parent to my dialogs, so I have this line:

<body style='height: 100%; min-height: 100%;'>

That, plus James' suggestion to add this to my CSS file:

div.ui-dialog {position:fixed;}

... finally got my dialogs to appear at the center of the browser window and stay there while I scroll. Hope this helps future googlers who may pass through here.

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

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/

Upvotes: 56

Related Questions