Question

我正在显示jquery对话框，最初的小高度＆amp;出现在屏幕中心的宽度。一段时间后，我将一个不可见的div内容插入到对话框中，并增加对话框高度＆amp;宽度与动画功能。

这是代码

<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>

我希望增加对话框高度＆amp;宽度以这样的方式结果我的div内容将在对话框内正确显示，但我无法这样做。当对话框显示时，它的高度＆amp;宽度为85＆amp; 200但我的div大小是300/300。我需要增加对话框高度＆amp;宽度以这样的方式结果我的300/300 div将在对话框中正确显示。我使用animate函数作为结果高度＆amp;宽度将随着动画的位数而增加，并且它将显示在页面的中心。所以请指导我使用什么逻辑来增加对话框高度＆amp;宽度因此我的div内容将在对话框中显示，并且对话框应出现在页面的中心，同时增加高度和高度。宽度。请在我的代码中纠正区域，我在其中使用动画功能来增加对话框高度＆amp;宽度。感谢

此区号需要纠正

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

请看看＆amp;建议。感谢

Answer 1

这对我有用：

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

Answer 2

正如我昨天在这里提到的那样： jquery dialog height & width issue

只需使用minHeight和minWidth代替jquery对话框方法的高度/宽度属性。

他们的文档在这里：http://jqueryui.com/demos/dialog/

需要增加高度和带有animate函数的jquery对话框的宽度

2 个答案: