CODEWITHSUNDEEP
jquerysimplemodal
smugford
smugford

Reputation: 83

simple modal resizing and centering?

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.

Upvotes: 2

Views: 7734

Answers (3)

blackboard
blackboard

Reputation: 31

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.

Upvotes: 3

smugford
smugford

Reputation: 83

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.

Upvotes: 0

Eric Martin
Eric Martin

Reputation: 2841

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();   
    });
}});

Upvotes: 0

Related Questions