simple modal resizing and centering?

Question

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.

Answer 1

An example like the following should work for you:

$('#modalContentTest').modal({onShow: function (dialog) {
    var sm = this;
    dialog.container.animate({height: 550, width: 493}, 500, function () {
        sm.setPosition();   
    });
}});

Answer 2

Here is what I have so far

function modalThree($type) { var $type;

    jQuery("#simplemodal-container").animate({ width: 250 }, 0);
    jQuery("#simplemodal-container").animate({"left": "+=200px"}, "fast");
    jQuery("#simplemodal-container").animate({"top": "-=50px"}, "fast");


    jQuery('#simplemodal-container').css({
    position:'absolute',
    left: (jQuery(window).width() - jQuery('#simplemodal-container').outerWidth())/2,
    top: (jQuery(window).height() - jQuery('#simplemodal-container').outerHeight())/2
    });


    jQuery("#dialog").load("/default/modalTwo", function()
    {
      jQuery("#dialog").modal({
      overlay:80,
      autoResize:true,
      overlayCss: {backgroundColor:"#000"}
      });
    });
}

my site is pretty much a fixed width and i know the size of the content from the ajax call.

i resize it using the following

jQuery("#simplemodal-container").animate({ width: 250 }, 0); jQuery("#simplemodal-container").animate({"left": "+=200px"}, "fast"); jQuery("#simplemodal-container").animate({"top": "-=50px"}, "fast");

it kind of works but i'd like to calculate how much left and top is has to go based on the window size.

it works but i'm not sure if it is the solution.