Question

当我们点击按钮时，我试图让第一个jQuery UI dialog弹出用户屏幕的中心。我希望它看起来像上面那个链接上的示例中的那个（在样式方面，不是内容）。

在我的页面顶部，我定义了一个内部CSS <style>标记，它定义了以下规则：

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

此规则可确保在页面加载时对话框不可见。

接下来，我有<div>标签，用于定义对话框的UI：

<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将根据其他事件（在此问题的上下文之外）填充，然后是两个按钮，OK和Cancel。

最后，我有一个jQuery尝试在用户点击“添加”按钮时绘制UI对话框：

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

据我所知，一切看起来都不错。但是当我启动浏览器（FF）并运行它时，当我单击“添加”按钮时，UI对话框从我的屏幕中取出一半（不是CENTERED），没有边框，或者类似于UI对话框在上述链接中以任何方式，形状或形式。

所以我问：

如何将UI对话框居中？
如何设置UI对话框的样式，使其类似于链接中的对话框？

提前致谢！

Answer 1

工作演示 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" );
                }
            },
    });


});

Chrome中的工作图像

enter image description here

Answer 2

jQuery UI支持position（）方法：

jQuery position()

jQuery UI对话框无法正确显示

2 个答案: