Диалог jQuery UI не отображается правильно

Я пытаюсь открыть свой первый jQuery UI dialog, чтобы открыть его в центре экрана пользователя, когда они нажмут кнопку. Я хотел бы, чтобы это выглядело так, как показано в приведенном выше примере (с точки зрения стиля, не).Диалог jQuery UI не отображается правильно

В верхней части моей страницы, у меня есть внутренний CSS <style> тег, определенный, который определяет следующее правило:

#add-btn-dlg-panel { 
    display: none; 
}

Это правило гарантирует, что диалоговое окно не отображается на странице загрузки.

Далее, у меня есть <div> тег, который определяет интерфейс диалогового окна:

<div id="add-btn-dlg-panel" title="Add new attribute value"> 
    <div id="attrib-type-input"> 
     <select id="attrib-type-sel"></select> 
    </div> 

    <div id="attrib-value-input"></div> 

    <div id="add-config-dlg-btn-panel"> 
     <input id="add-config-dlg-ok-btn" type="button" value="OK"/> 
     <input id="add-config-dlg-cancel-btn" type="button" value="Cancel"/> 
    </div> 
</div>

Он состоит из <select>, другой DIV, который будет заполняться на основе других событий (вне контекста этого вопроса) , а затем две кнопки, «ОК» и «Отмена».

Наконец, у меня есть JQuery, который пытается сделать диалог UI, когда пользователь нажимает на кнопку «Добавить»:

$("#add-config-btn").click(function() { 
    $("#add-btn-dlg-panel").show(); 
    $("#add-btn-dlg-panel").dialog('open'); 
});

Насколько я могу сказать, что все выглядит хорошо. Но когда я запускаю браузер (FF) и запускаю его, когда я нажимаю кнопку «Добавить», диалоговое окно пользовательского интерфейса рисует на полпути с моего экрана (не CENTERED), не имеет границы или похоже на диалог пользовательского интерфейса в вышеуказанной ссылке каким-либо образом, формой или формой.

Так я спрашиваю:

Как центрировать диалог UI?
Как настроить диалог пользовательского интерфейса так, чтобы он напоминал ссылку в ссылке?

Заранее благодарен!

источник

2012-10-17 IAmYourFaja

рабочий примерhttp://jsfiddle.net/rES7j/show/#илиhttp://jsfiddle.net/rES7j

скрипты

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> 

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css">

код

$(document).ready(function() { 
    $('#theLink').click(function(){ 
       $("#add-btn-dlg-panel").dialog("open");  
    }); 

    $("#add-btn-dlg-panel").dialog({ 
      modal: true, 
      autoOpen: false, 
      height: 255, 
      width: 300, 
      buttons: { 
       "Retrieve": function() { 
        document.forms["forgotform"].submit(); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      }, 
    }); 


});

Рабочая изображения в хроме

enter image description here