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

jquery ダイアログ メソッドの高さ/幅属性の代わりに、minHeight と minWidth を使用するだけです。

ドキュメントはこちら: http://jqueryui.com/demos/dialog/

于 2012-05-01T21:12:17.737 に答える