CODEWITHSUNDEEP
jqueryjquery-ui
Sanjay Maharjan
Sanjay Maharjan

Reputation: 671

adjusting position of dialog box in jquery

<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?

Upvotes: 2

Views: 2538

Answers (3)

Shankar Cabus
Shankar Cabus

Reputation: 9792

Try to use this CSS to dialog box:

​.dialog {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left: -100px; /* -width/2 */
    top: 50%;
    margin-top: -100px; /* -height/2 */
    background-color: red;
}​

And I suggest this JS:

 $.ajaxSetup({ cache: false });

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

         $("<div/>",{
             class: "dialog",
             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();
     });
 }); ​

Demo: http://jsfiddle.net/MFPpw/

Upvotes: 1

Lyubomir Vasilev
Lyubomir Vasilev

Reputation: 3030

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]" );

Upvotes: 1

rahul
rahul

Reputation: 7663

have you tried 

 $(".dialog").dialog('option', 'position', 'center');

or

.dialog({
         title: $(this).attr("data-dialog-title"),
         minWidth: 500,
         minHeight: 100,
         resizable: false,                      
         close: function () { $(this).remove() },
         position:'center',
         modal: true
       })

Upvotes: 2

Related Questions