Question

<script type="text/javascript">
  $.ajaxSetup({
    cache: false
  });

  $(document).ready(function () {
    $(".openDialog").live("click", function (e) {
      e.preventDefault();

      $("<div></div>").addClass("dialog").attr("id", $(this).attr("data-dialog-id")).appendTo("body").dialog({
        title: $(this).attr("data-dialog-title"),
        minWidth: 500,
        minHeight: 100,
        resizable: false,

        close: function () {
          $(this).remove()
        },

        modal: true
      }).load(this.href);
    });

    $(".close").live("click", function (e) {
      e.preventDefault();
      $(this).closest(".dialog").dialog("close");
    });

    $(".refresh").live("click", function (e) {
      e.preventDefault();
      location.reload();
    });
  });
</script>

i am using above jquery to get dialog box. but when the dialog box is shown it appears in the random part of the window which is very uncomforting. I want to make the dialog box appear in the center of the window. What should I do to make dialog box appear in center of the window?

Answer 1

From jQueryUI dialog documentation:

position

String, Array Default:
"center"

Specifies where the dialog should be displayed. Possible values:

1) a
single string representing position within viewport: ‘center’, ‘left’,
‘right’, ‘top’, ‘bottom’.

2) an array containing an x,y coordinate
pair in pixel offset from left, top corner of viewport (e.g.
[350,100])

3) an array containing x,y position string values (e.g.
[‘right’,’top’] for top right corner). Code examples

Initialize a dialog with the position option specified.

$( ".selector" ).dialog({ position: "top" });

Get or set the position option, after init.

//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", "top" );

So have you tried the variant with the exact position?

$( ".selector" ).dialog( "option", "position", "[350, 100]" );