jquery dialog height & width issue

问题

initially i am showing jquery dialog with fixed height and width at center of page. now i want to put a div with lots of html content inside the dialog. now i want to dynamically increase dialog height & width according to the div height & width with animate function but i want that dialog should stick at the center of page.

when dialog open first time at center of page and later if i change the height & width then dialog is not position at the center of page. so help me with concept that how to force dialog stick at center of page when height & width will be increasing with animate function.

this way i am working with dialog....here is my small code

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

if possible then please show me the trick with sample code. thanks

回答1:

OK, would this work, assuming nothing about how the element is resized?

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

回答2:

You can try with this: DEMO

This automatically increases the height of the dialog dynamically

HTML:

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

Script:

<script>
     $('#dialog').dialog(
      "resize", "auto"
     );
     $('#dialog').dialog();
     setTimeout(function() {
        $('#body').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
</script>

回答3:

Rather than put javascript watchers on the div, you can simply use the 'minHeight' option for the dialog.

http://jqueryui.com/demos/dialog/ -> Options

That makes your code look something like this:

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

来源：https://stackoverflow.com/questions/10384712/jquery-dialog-height-width-issue

标签

jquery

jquery-ui