Question

最初我在页面中心显示了固定高度和宽度的jquery对话框。现在我想在对话框中放入一个包含大量html内容的div。现在我想动态增加对话框高度＆amp;根据div高度和宽度的宽度宽度与动画功能，但我希望该对话框应该坚持在页面的中心。

当对话框第一次在页面中心打开时，如果我改变高度＆amp;宽度然后对话框不位于页面的中心。所以请帮我解释一下如何在高度和高度时强制对话框粘在页面中心的概念。宽度将随着动画功能而增加。

这样我正在使用对话框......这是我的小代码

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

如果可能的话请告诉我示例代码的技巧。感谢

Answer 1

您可以尝试使用此功能： DEMO

这会自动动态增加对话框的高度

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>

Answer 2

好的，这是否有效，假设元素的大小调整没有任何意义？

$(#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/

Answer 3

您可以在对话框中使用“minHeight”选项，而不是将javascript观察者放在div上。

http://jqueryui.com/demos/dialog/ - ＆gt;选项

这使您的代码看起来像这样：

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

jquery对话框高度＆amp;宽度问题

这样我正在使用对话框......这是我的小代码

3 个答案: