CODEWITHSUNDEEP
javascriptcssjquery-ui
Div
Div

Reputation: 179

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

Upvotes: 2

Views: 14077

Answers (7)

spleen
spleen

Reputation: 11

@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*/
}

Upvotes: 0

e-motiv
e-motiv

Reputation: 5893

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

Upvotes: 0

Enrique
Enrique

Reputation: 4833

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.

Upvotes: 0

Abdul Nasir Khayam
Abdul Nasir Khayam

Reputation: 337

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

Upvotes: 0

Alnitak
Alnitak

Reputation: 339786

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.

Upvotes: 1

syed imty
syed imty

Reputation: 1028

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

Upvotes: 6

Kevin Murani
Kevin Murani

Reputation: 186

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.

Upvotes: 0

Related Questions