1

我试图让我的第一个jQuery UI 对话框在用户单击按钮时弹出在用户屏幕的中心。我希望它看起来像上面那个链接的示例中的那个（就风格而言，而不是内容）。

在我的页面顶部，我定义了一个内部 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 组成，该 div 将根据其他事件（在此问题的上下文之外）填充，然后是两个按钮，确定和取消。

最后，当用户单击“添加”按钮时，我有尝试绘制 UI 对话框的 jQuery：

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

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

所以我问：

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

提前致谢！

4

2 回答 2

3

工作演示 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中的工作图像

在此处输入图像描述 ​</p>

于 2012-10-17T02:20:39.523 回答
0

jQuery UI 支持 position() 方法：

jQuery 位置（）

于 2012-10-17T02:23:18.937 回答