1

最初は、ページの中央に高さと幅が固定されたjqueryダイアログを表示しています。今、私はダイアログ内にたくさんのhtmlコンテンツを含むdivを置きたいと思います。ここで、アニメーション関数を使用してdivの高さと幅に応じてダイアログの高さと幅を動的に増やしたいのですが、ダイアログをページの中央に固定する必要があります。

ダイアログが最初にページの中央で開いたとき、後で高さと幅を変更すると、ダイアログがページの中央に配置されません。アニメーション機能を使用して高さと幅が増加するときに、ダイアログをページの中央に強制的に固定する方法について説明します。

このように私はダイアログで作業しています....これが私の小さなコードです

 $(document).ready(function () {

         $("#dialog").dialog({
             autoOpen: false,
             bgiframe: true,
             height: 85,
             width: 330,
             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");
             }
         });
         });

可能であれば、サンプルコードでトリックを見せてください。ありがとう

4

3 に答える 3

0

あなたはこれで試すことができます：デモ

これにより、ダイアログの高さが動的に自動的に増加します

HTML：

<div id="dialog">
    <div id="body">I'm a dialog</div>
</div>

脚本：

<script>
     $('#dialog').dialog(
      "resize", "auto"
     );
     $('#dialog').dialog();
     setTimeout(function() {
        $('#body').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
</script>
于 2012-04-30T13:47:53.443 に答える
0

OK、要素のサイズ変更方法について何も想定していない場合、これは機能しますか？

$(#dialog).resize(function(){
    var $host = $("#idOfParent");
    var hostHeight = $host.Height();
    var hostWidth = $host.Width();
    // center dialog on screen
    this.left = (hostWidth - this.width) / 2
    this.top= (hostHeight - this.height) / 2
});

http://api.jquery.com/resize/

于 2012-04-30T13:50:46.183 に答える
0

divにjavascriptウォッチャーを配置するのではなく、ダイアログに「minHeight」オプションを使用するだけです。

http://jqueryui.com/demos/dialog/- >オプション

これにより、コードは次のようになります。

 $("#dialog").dialog({
         autoOpen: false,
         bgiframe: true,
         minHeight: 85,
         width: 330,
         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");
         }
     });
于 2012-05-01T11:52:41.723 に答える