Question

我正在使用simplemodal来显示一个带有一些内容的模态。

在内容中，我正在对其他内容进行ajax调用，这些内容与原始内容大小不同（相当小）

我正在做的是使用jQuery来改变模态容器的大小。

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

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

这有两个问题。

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

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

有没有人知道如何根据open模式中的新内容调整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

这是我到目前为止所拥有的

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

我的网站几乎是一个固定的宽度，我知道来自ajax调用的内容的大小。

我使用以下

调整大小

jQuery（“＃simplemodal-container”）。animate（{width：250}，0）; jQuery（“＃simplemodal-container”）。animate（{“left”：“+ = 200px”}，“fast”）; jQuery（“＃simplemodal-container”）。animate（{“top”：“ - = 50px”}，“fast”）;

它有点工作，但我想根据窗口大小计算左边和顶部的数量。

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

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

3 个答案: