2012-05-01 53 views
0

我顯示與出現屏幕的中心最初小高度&寬度jquery的對話框。 一些時刻i插入一個不可見的div內容到對話的和增加對話框高度&寬度與animate函數之後。需要增加高度&jquery的對話框的寬度與animate函數

這裏是我想提高對話高度這種方式&寬度,結果我的div的內容會顯示正確的對話框裏面的代碼

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#dialog").dialog({ 
      autoOpen: false, 
      bgiframe: true, 
      height: 85, 
      width: 200, 
      modal: false, 
      draggable: true, 
      resizable: false, 
      position: 'center', 
      show: { 
       effect: "fade", 
       duration: 1000 
      }, 
      hide: { 
       effect: "fade", 
       duration: 500 
      }, 
      open: function (type, data) { 
       $(this).parent().appendTo("form"); 
      } 
     }); 



     $("#btnfax").click(function() { 
      $(".ui-dialog").css({ position: 'fixed', top: '50%', left: '50%', marginleft: '-100px', margintop: '-50px' }); 
      $("#dialog").removeClass('ui-dialog-content ui-widget-content').addClass('BusyStyles').html(''); 
      $("#dialog").dialog("open") 

      $.doTimeout(1000, function() { 
       $("#dialog").html($('#content').html()); 


       $(".ui-dialog").animate({ 
        left: (($(window).width() - $('#dialog').outerWidth())/2) + 'px', // or you might want to use .outerWidth() 
        top: (($(window).height() - $('#dialog').outerHeight())/2) + 'px', 
        height: (($('#dialog').outerHeight() - $('#content').outerHeight()) + $('#content').outerHeight()) + 'px', 
        width: (($('#dialog').outerWidth() - $('#content').outerWidth()) + $('#content').outerWidth()) + 'px' 
       }, 500, 
       function() { 
        $("#dialog").removeClass("BusyStyles").find('#FaxMain').fadeIn(2000); 
       }); 

      }); 
      return false; 
     }); 

    }); 
</script> 

,但我沒有能夠做到這一點。當對話框表示則其高度&寬度是85 & 200,但我的格尺寸是300/300。我需要增加對話框高度&寬度以這樣的方式爲我的300/300格將在對話框中顯示正確的結果。我使用動畫功能結果高度&寬度將與動畫的位增加,也將顯示在頁面的中心。所以請指導我使用什麼邏輯來增加對話框高度&寬度,結果我的div內容將在對話框中顯示,同時對話框應該出現在頁面中心並且寬度增加了&。請在我的代碼,我使用動畫功能來增加對話框高度&寬度整頓地區。感謝


這個區號需要加以糾正

$(".ui-dialog").animate({ 
       left: (($(window).width() - $('#dialog').outerWidth())/2) + 'px', // or you might want to use .outerWidth() 
       top: (($(window).height() - $('#dialog').outerHeight())/2) + 'px', 
       height: (($('#dialog').outerHeight() - $('#content').outerHeight()) + $('#content').outerHeight()) + 'px', 
       width: (($('#dialog').outerWidth() - $('#content').outerWidth()) + $('#content').outerWidth()) + 'px' 
      }, 500, 
      function() { 
       $("#dialog").removeClass("BusyStyles").find('#FaxMain').fadeIn(2000); 
      }); 

請有看看&建議。感謝

回答

1

這爲我工作:

$("#dialog").parents(".ui-dialog:first").animate({ 
    width: '600px', 
    height: '500px' 
}, { 
    duration: 500, 
    step: function() { 
     $("#dialog").dialog('option', 'position', 'center'); 
    } 
}); 
0

正如我當你昨天在這裏張貼了這個問題提到: jquery dialog height & width issue

只需使用和了minHeight代替minWidth jQuery的對話框方法的高度/寬度屬性。

他們的文檔在這裏:http://jqueryui.com/demos/dialog/

+0

如果我使用代替了minHeight高度則會有怎樣的優勢? – Thomas

+0

盒子高度/寬度(使用minHeight/minWidth時)將是最小尺寸,然後根據內容自動調整大小。即如果您將minHeight設置爲300,將minWidth設置爲500,並且您的內容爲200 x 400,則該框爲300 x 500.如果內容爲400 x 400,則您的框爲400 x 500.如果內容爲400 x 1000,箱子高度將是400 x 1000,等等。這有道理嗎? – MaddHacker

相關問題