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?
Add a comment
|
4 Answers
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/
7 Comments
nnikolay
Ok, but the layoer will be not centered. It will stay 50px top and 50px left, but this is not center. How to center it?
Kevin Bowersox
Niko Nik I updated my answer to handle the centering, I didn't realize you wanted to keep it centered.
Kevin Bowersox
@jk. Thanks i didn't realize you could do that with js fiddle.
Omu
using this approach starting with 1.9.0 if you scroll to bottom before clicking on the link that opens the popup the dialog will go offscreen
mecsco
I needed to use
position: fixed !important; as other classes in use were setting it to absolute instead |
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.
Comments
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 });
}
});
1 Comment
John
Perfect for what I needed! Also, you don't need to specify the exact position either, if you don't want to. It's compatible with the
draggable: true proprerty so you can let the user move it and it will stay where they left it as they scroll.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.
