2

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

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

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

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

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

这有两个问题。

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

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

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

非常感谢。

4

3 回答 3

3

我的 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。

于 2013-01-07T09:37:21.193 回答
0

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

函数 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");

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

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

于 2010-06-30T18:22:49.380 回答
0

像下面这样的例子应该适合你：

$('#modalContentTest').modal({onShow: function (dialog) {
    var sm = this;
    dialog.container.animate({height: 550, width: 493}, 500, function () {
        sm.setPosition();   
    });
}});
于 2010-06-28T22:52:02.200 回答