I’ve been using more of the SharePoint 2010 Client Object Model lately and had a need for a lightbox UI. I decided to use SP.UI.ModalDialog.showModalDialog(…), but found it irritating that the rendered DIV did not float by default.
So I turned to jQuery to calculate and set an offset to guarantee that the modal dialog will always render mid-window. Here is a very simple way to float the ModalDialog window; the ‘html’ argument is your HTML markup, or you can alter this to pass in a URL.
function openDialog(html) {
var _options = { html: html,
allowMaximize: false,
autoSize: true,
showClose: true,
title: "Zoom"
};
SP.UI.ModalDialog.showModalDialog(_options);
var y = $(window).scrollTop();
var boxBorder = $(window).height() - $(".ms-dlgContent").height();
y = y + boxBorder / 2;
$(".ms-dlgContent").css({ position: 'absolute', top: y });
}
Hi Russ, Your solution does not work for me (well it almost work). If I debug the js it works, but if I just run it directly it doesn’t. It seems there is a race condition between what .showModalDialog does and the js code trying to retrieve “.ms-dlgContent”.
Since the call to .showModalDialog is implemented as an AJAX call, it is possible that the jQuery code to select elements using the .ms-dlgContent class will execute just before the dialog actually is ready to render. I have not personally seen this issue, but it’s at least a possibility.
Seems to be true. In Firefox and IE is jQuery to set css of dialog window fired too early. For me works in both browsers if code is placed in condition.
if(SP.UI.ModalDialog.showModalDialog(option)) {
// place .css call here
}
Whole frontend is written in ExtJS and only few OOB forms are done in SP. Shame is that there are no listeners like on loaded, beforender etc for modal dialogs and not only for them. Who knows ExtJS know what I´m talking about. Hope SP 2013 will be better.