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