简单的模式调整大小和居中？

Question

我正在使用 simplemodal 来调出一个包含一些内容的模式。

在该内容中，我正在对其他一些内容进行 ajax 调用，这些内容的大小与原始内容不同（小得多），

我正在做的工作是使用 jQuery 来更改模式容器的大小。

在我的 ajax 调用的 oncomplete 部分中，我使用以下 jquery，

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

这有两个问题。

在不同的浏览器中，宽度略有不同，因此模式内容看起来不太正确，

并且模式保持其原始位置。它不会在浏览器窗口中重新居中。

有谁知道如何根据开放模式内的新内容调整 simplemodal 的大小？

非常感谢。

Answer 1

我的 SimpleModal 自动宽度/高度和居中模式代码：

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

工作 IE、FireFox 和 Chrome。

Answer 2

下面的示例应该适合您：

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

Answer 3

这是我到目前为止的

功能 modalThree($type) {
var $类型；

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

我的网站几乎是固定宽度的，我从 ajax 调用中知道内容的大小。

我使用以下

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

它有点有效，但我想根据窗口大小计算左侧和顶部的距离。

它有效，但我不确定这是否是解决方案。