Установка местоположения оверлея модального в javascript в пределах Chrome

Question

У меня есть список ссылок, для которых я пытаюсь открыть диалоговое окно, когда пользователь нажимает на элементы. Тем не менее, я не могу открыть диалоговое окно в соответствующем месте. Как я могу получить диалоговое окно для отображения в центре области, в которой пользователь в данный момент находится на странице? Это мой код:

 currentLink.click( function() { //this is called when link is clicked
  $('#dialog').dialog( { // this is the overlay dialog box
    autoOpen: false,
    resizable: false,
    draggable: false,
    modal: true,
    overlay: {
      backgroundColor: 'white',
      opacity: 1.0
    },
    closeText: 'x',
    buttons: {
      'Yes!': function() {
        //do something              
      });
      $(this).dialog('destroy');
    },
    'Cancel': function() { //need to set focus still
      $(this).dialog('destroy');
      }  
    }
  }).dialog('open');
});

Я попытался добавить; Например,

position: ["top", 50] 

, но это просто расположило диалоговое окно в верхнем левом углу.

Если это полезно, это мой css:

.ui-widget {
      background-color: white;
      opacity: 1.0px;
   }

   .dialog {
       display:none;
       background-color: white;
       opacity: 1.0;
       width: 50px;
       height: 20px;
       border: 0px solid black;
       padding-left: 5px;
   }

   .ui-dialog {
      position:absolute;
      top:20px;
      left: 0;
      padding: .2em;
      border: 1px solid black;
      outline: 0;
   }