1

我正在显示最初出现在屏幕中心的高度和宽度较小的 jquery 对话框。一段时间后，我将不可见的 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>

我想以这种方式增加对话框的高度和宽度，因此我的 div 内容将在对话框内正确显示，但我无法这样做。当对话框显示时，它的高度和宽度是 85 和 200，但我的 div 大小是 300/300。我需要以这种方式增加对话框的高度和宽度，这样我的 300/300 div 将正确显示在对话框中。我使用动画功能，结果高度和宽度会随着动画位的增加而增加，并且它也会显示在页面的中心。所以请指导我使用什么逻辑来增加对话框的高度和宽度，结果我的 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);
            });

请看和建议。谢谢

4

2 回答 2

2

这对我有用：

$("#dialog").parents(".ui-dialog:first").animate({
    width: '600px',
    height: '500px'
}, {
    duration: 500,
    step: function () {
        $("#dialog").dialog('option', 'position', 'center');
    }
});
于 2013-05-16T12:54:09.810 回答
0

正如我昨天在这里发布这个问题时提到的那样： jquery dialog height & width issue

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

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

于 2012-05-01T21:12:17.737 回答