簡單模態調整大小和居中？

我正在使用simplemodal來調出其中包含一些內容的模式。簡單模態調整大小和居中？

裏面的內容我想提出一個Ajax調用是從原來的內容不同大小的其他一些內容（相當小了些）

我在做什麼是那種工作是使用jQuery改變模態容器的大小。

在我的Ajax調用的部分的onComplete

我用下面的jQuery

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

有兩個問題與此有關。

在不同瀏覽器

寬度，使該模式的內容看起來不正確

和模態保持它原來的位置略有不同。它不會在瀏覽器窗口中重新定位。

沒有人知道如何根據開放模式中的新內容調整simplemodal的大小？

非常感謝。

來源

2010-06-28 smugford

象下面的例子應該爲你工作：

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

來源

2010-06-28 22:52:02

我不認爲我正確地解釋了自己。我想要模態1打開，然後在模態1內ajax調用替換div內的內容。來自ajax調用的內容小於原始內容，我需要調整模式和調整它的大小。該示例中的代碼工作完美，如果模態尚未打開，但我想要做的是在模態已經打開時重新調用模態。我能想到的唯一辦法就是馬上關閉並打開另一個模式。有沒有辦法做到這一點，而不關閉原始模式？ – smugford 2010-06-30 14:02:14

我想我理解你的原始問題，你只需要修改我提供的代碼以適應你的需求。您需要將ajax調用添加到onShow回調中，然後將ajax成功回調中的dialog.container.animate部分代碼移出。您將從數據返回的維度。希望這是有道理的。 – 2010-06-30 18:13:01

這裏是我迄今爲止

功能modalThree（$型）{ 變量$類型;

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容器」）它動畫（{寬度：250}，0）; jQuery（「＃simplemodal-container」）。animate（{「left」：「+ = 200px」}，「fast」）; jQuery（「＃simplemodal-container」）。animate（{「top」：「 - = 50px」}，「fast」）;

它的工作類型，但我想計算左和頂必須去多少基於窗口大小。

它的工作原理，但我不知道它是否是解決方案。

來源

2010-06-30 18:22:49 smugford

我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，火狐和鉻。

來源

2013-01-07 09:37:21 blackboard

我很確定有錯誤。它應該是： var top =（h/2） - （h2/2）; var left =（w/2） - （w2/2）;' – 2013-12-20 19:59:40

簡單模態調整大小和居中？

回答

相關問題