jQuery modal dialog not centered in SharePoint 2007

Question

On the AllItems-page of a list I added a Content Editor WebPart above the webpart that displays the list. This webpart only contains an HTML button. When the user clicks the button, all items in the list will be processed by several JavaScript/jQuery/AJAX functions. But the list contains 1000+ items and it's not user-friendly not to let them know that the code is processing the items.

First, for development purposes, I used alerts between methods to show some kind of interactivity and providing the user with information. But now I'm using the jQuery Modal Dialog to show the user in a nice way that the code is processing the items.

The dialog is shown but it is not centered on the screen, the title bar is not shown over the complete width of the dialog and the transparent-gray overlay is not visible. I tested the exact same code in an empty ASP.NET Web Application and in that context everything works fine.

I'm using jQuery 1.8.2 and jQuery UI 1.10.1. Anyway here's what I have:

function showProcessDialog() {
    showDialog("Please wait while processing all items...", null);
}

function showDialog(message, dialogButtons) {
    $("#messageContainer").text(message);
    $('#dialog-message').parent().appendTo($('form:first'));
    $("#dialog-message").dialog({
        draggable: false,
        height: "auto",
        modal: true,
        open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
        position: { my: "center", at: "center", of: window },
        resizable: false,
        width: 400,
        buttons: dialogButtons
    });
}

Note this line:

$('#dialog-message').parent().appendTo($('form:first'));

I read that when a page is loaded in SharePoint 2007, jQuery manipulates the DOM and that the div-element that will act as the dialog is placed on the outside of the body. The biggest problem with this is that no server-side controls in the dialog will work anymore and this line places the div back in the form. I left it there because you never know...

This is the result in the ASP.NET Web Application:

And this is the same code in SharePoint 2007:

Does anyone know how I can solve this so that the result is the same as the working one? Thanks in advance!

Answer 1

I had the EXACT same problem in an application that I was attempting to upgrade to the latest versions of jQuery and jQuery UI. I was running IE 8 (in 7 mode).

I can tell you that what was working before I upgraded was jQuery 1.6.2 and jQuery UI 1.8.16. Ultimately, I switched back to these versions because the client was upgrading to SP 2010 soon anyway, and it wasn't worth the hassle to resolve it.

    $('#search-modal').dialog({ autoOpen: false, bgiframe: true, modal: true, width: 400, height: 550, resizable: false });
    $('#search-modal').dialog('open');
    $('#search-modal').parent().appendTo($("form:first"));

Good luck!