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

css, javascript, jquery-ui

Solution

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

Problem

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

Original source