'How to position a dialog box to the centre of a window

Can anyone please tell me how to position a box to the centre of the window using JQuery. I will paste the code below :-

    

    $("#address_book").click(function (e)
      {
          .........

         ShowDialog(false);
         e.preventDefault();
        ........
      });

    function ShowDialog(modal){

    ....  
      $("#overlay").show();

      $("#dialog").fadeIn(300);

      if (modal)
      {

         $("#overlay").unbind("click");
      }
      else
      {
         $("#overlay").click(function (e)
         {
            HideDialog();
         });
      }
     }

I want the dialog box to the centre of the window. Can anyone please tell me how to do this

javascriptcssjquery-ui


Solution 1:[1]

The below code is not jquery, but pure javascript, so it will work without any hickup

  var dialog = document.getElementById('dialog')
  dialog.style.top = ((window.innerHeight/2) - (dialog.offsetHeight/2))+'px';
  dialog.style.left = ((window.innerWidth/2) - (dialog.offsetWidth/2))+'px';

Same code using jquery

  $('#dialog').css({
      top: ((window.innerHeight/2) - ($('#dialog').height()/2))+'px',
      left:((window.innerWidth/2) - ($('#dialog').width()/2))+'px'
    });

Demo of the code, in different application Demo

Note: your #dialog should have, position:absolute in its css, inorder to position the that div

Solution 2:[2]

jQueryUI dialogs automatically center themselves so long as you have placed all content in them before they're opened.

However they will always be centered relative to the browser window, and not any parent "container" element, because jQueryUI removes the element that's converted into a dialog from the DOM and re-appends it to document.body.

Solution 3:[3]

Try this in jQuery:

$("#dialog").css("margin-top", ($(document.height() - $(this).height())/2);
$("#dialog").css("margin-left", ($(document.width() - $(this).width())/2);

This should work.

Solution 4:[4]

$('#mycustomdialogDiv').css({ top: 100, left:100 });

sometimes this code will not work for you with jquery, because jquery dialog box generate its own wrapper over your customdialogdiv element. in order to achieve it, use below code; $('#mycustomdialogDiv').parent('div').css({ top: 100, left:100 });

Solution 5:[5]

If you know the height and width of the dialog you can just set:

top: 50%;
left: 50%;
margin-top: -[HEIGHT/2]px;
margin-left: -[WIDTH/2]px;

The advantage of that is if the widnow is resized it will be in the center anyway.

Solution 6:[6]

Best to do it with css and transform, since..

  1. Different browsers already place dialogs in middle, but even then in different ways!
  2. You can only recalculate its own width positioning with transform (not with margin, etc.)
dialog {
    position: absolute;
    left: 50vw;
    top: 50vw;
    transform: translate(-50%, -50%);
    margin: 0; /*reset some browser centering*/
}

And if you really need jquery for some reason just add a class with jQuery, using the above css

Solution 7:[7]

@e-motiv - sorry not enough rep to comment on yr post

dialog {
    position: fixed; /*change to fixed for scrolling pages*/
    left: 50vw;
    top: 50vh; /*change from vw to vh*/
    transform: translate(-50%, -50%);
    margin: 0; /*reset some browser centering*/
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Kevin Murani
Solution 4 Abdul Nasir Khayam
Solution 5 Enrique
Solution 6 e-motiv
Solution 7 spleen

Related Questions