Jquery – simple modal resizing and centering

jquerysimplemodal

I am using simplemodal to bring up a modal with some content in it.

Inside that content i am making a ajax call to some other content which is a different size from the original content (quite a bit smaller)

what i'm doing that is kind of working is using jQuery to change the size of the modal container.

in the oncomplete section of my ajax call i use the following jquery

jQuery("#simplemodal-container").animate({ height: 550 }, 500);
jQuery("#simplemodal-container").animate({ width: 493}, 500);'

there is two problems with this.

in different browsers the width is slightly different so the modal content doesn't look quite right

and the modal maintains it's original position. it doesn't recenter itself in the browser window.

does anyone know how to resize simplemodal based on new content inside of a open modal?

thanks very much.

Best Answer

My SimpleModal Auto Width/Height and centered modal code: 

$('#sampleDiv').modal({
onShow: function (dialog) {
            var h = $(window).height();
            var w = $(window).width();
            dialog.container.css('height', 'auto');
            dialog.container.css('width', 'auto');
            var h2 = dialog.container.height();
            var w2 = dialog.container.width();  
            var top = (h/2)-(h2/2)-h2;  
            var left = (w/2)-(w2/2)-w2;                                                         
            dialog.container.css('left', left+'px');
            dialog.container.css('top', top+'px');
    }
});

Working IE,FireFox and Chrome.

Related Topic