Tuesday, November 20, 2012

Resize SP Modal Popup (SP.UI.ModalDialog)

It has been a very long time since I posted a new blog post. I was working temporarily on MVC which is very exciting, interesting and hell lot to learn .....

Now coming to SP 2010, recently I had a requirement to re-size the modal popup dynamically based on the content on the page. As everyone know that we can set the width and height of the modal popup before opening the popup as below.

var options = {
    url: "/_layouts/useregistration.aspx",
    title: 'Login/Register',
    allowMaximize: true,
    showClose: true,
    autoSize: false,
    y: 50,
    width: 400,
    height: 600
};
var currentDialog = SP.UI.ModalDialog.showModalDialog(options);

The width and height parameters will be applied when the autoSize option is set to false. But I could not find any methods or options to re-size an already opened up popup using any functions. If the autoSize option is set to true, it re-sizes the window if the page gets posted back.

What happens when some dynamic content gets shown/hidden using css/jQuery? SP does not resize the popup based on this.

So I had to write a java script function to do that. I added the below function to a common JS file that is references in every page of my application to make use of it. Below is the function to re-size the popup which was opened up already.

this.Utility.resizeSPPopupWindow = function (width, height) {
    $(window.frameElement).parents('.ms-dlgContent').width(width);
    $(window.frameElement).parents('.ms-dlgContent').find('.ms-dlgBorder, .ms-dlgTitle').width(width);
    $(window.frameElement).width(width);
   
    try {
        var _intHeight = parseInt(height);
        height = _intHeight + 34; //34 is added to the height,the title bar's height adds up
    }
    catch (ex) {
    }


    $(window.frameElement).parents('.ms-dlgContent').height(height);
    $(window.frameElement).parents('.ms-dlgContent').find('.ms-dlgBorder').height(height);
    $(window.frameElement).height(height);
}

Of course it needs jQuery to work, it is one-way that I know of re-sizing already opened up modal popup.

If anyone out there knows any other way to achieve the same, I would love to know about it. Hope this helps some one.

UPDATE: If the popup modal is a new url, both the parent and the modal popup page should be from the same domain and should be using the same protocol (http or https).

Happy Coding !!!
Senthil S