2012-05-01 26 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

相关问题