My jQuery dialog won't open in the same place each time
I have a jQuery dialog in an asp.net MVC 4 app that opens with it's contents as expected but the first time it is an inch? lower on the screen than the subsequent openings. Each subsequent opening occurs in the same and preferred location higher up the page. This is a not yet complete fix for a worse problem where subsequent openings of the dialog, after being dragged, failed to center the dialog, and also introduced scrollbars and added empty space at the end of the page of the same size as the dialog. This at least fixes all of those problems. Here is my code:
- $(function () {
- $("#StatusData").dialog({
- autoOpen: false,
- modal: true,
- resizable: false,
- draggable: true,
- width: 800,
- show: {
- effect: "fade",
- duration: 100
- },
- hide: {
- effect: "fade",
- duration: 100
- },
- create: function (event, ui) {
- // Center the dialog each time it re-opens
- $(this).dialog('widget')
- .css({ position: 'fixed' })
- .position({ my: 'center', at: 'center', of: window, collision: 'fit' });
- },
- open: function (event, ui) {
- // Remove the closing 'x' from the toolbar and replace it with the text 'Close'
- $('.ui-dialog-titlebar-close')
- .removeClass("ui-dialog-titlebar-close")
- .html('<span style="float:right; margin-right: 10px; font-weight: normal;">Close</span>');
- }
- });
BTW, line 21 has absolutely no effect. I get the same apparent behavior whether or not it is there.
What am I missing, how do I get the dialog located at the same place each time?