jQuery UI Dialog两大问题：无法居中、关闭按钮异常

哈哈，这个问题我在SharePoint/Office 365环境里踩过好几次坑了！刚好两个问题都碰到过，给你说说我的解决思路和具体代码：

问题1：对话框始终在左上角，无法居中显示 #

原因分析 #

SharePoint的母版页自带了很多全局CSS样式，比如对body或容器元素设置了position: relative，或者默认的布局样式会覆盖jQuery UI Dialog的默认定位规则。另外，如果jQuery UI的CSS加载顺序在SharePoint CSS之前，也会导致定位样式被冲掉。

解决方案 #

1. 初始化时强制指定居中定位：在Dialog的配置里明确设置position参数，确保它相对于浏览器窗口居中。
2. 自定义CSS覆盖SharePoint的冲突样式：给Dialog容器添加强制定位的样式，避免被SharePoint的CSS干扰。

代码示例

首先，初始化Dialog的时候加上定位配置：

$(document).ready(function() {
    $("#newEventDialog").dialog({
        autoOpen: false, // 初始不打开，用函数触发
        modal: true,
        width: 600,
        // 强制相对于窗口居中
        position: { 
            my: "center", 
            at: "center", 
            of: window,
            collision: "none" // 避免窗口过小的时候偏移
        },
        buttons: {
            "关闭": function() {
                $(this).dialog("close");
            }
        }
    });
});

然后添加自定义CSS（可以放在Script Editor或者自定义CSS文件里）：

/* 覆盖SharePoint的样式，确保Dialog居中 */
.ui-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000 !important; /* 确保在SharePoint自带模态框之上 */
}

问题2：关闭按钮仅首次有效，后续打开失效 #

原因分析 #

这个坑我踩过！大概率是你每次调用openNewEvent函数时，都在重新创建Dialog实例（比如每次都调用$("#dialog").dialog()），导致之前绑定的关闭事件被销毁，而新生成的Dialog元素没有重新绑定事件。另外，如果用了普通的click事件绑定（而非事件委托），动态生成的关闭按钮（比如标题栏的X）也会丢失事件。

解决方案 #

1. 只初始化一次Dialog：页面加载时就完成Dialog的初始化，设置autoOpen: false，之后只调用dialog("open")和dialog("close")来控制显示隐藏，不要重复初始化。
2. 用事件委托绑定关闭事件：针对标题栏的X按钮这种动态生成的元素，使用事件委托确保事件始终有效。

代码示例

$(document).ready(function() {
    // 只初始化一次Dialog，后续不再重复创建
    $("#newEventDialog").dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        position: { my: "center", at: "center", of: window },
        buttons: {
            "关闭": function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            // 可选：关闭时重置表单内容，不要销毁Dialog
            $("#newEventForm")[0].reset();
        }
    });

    // 用事件委托绑定标题栏的X按钮，确保每次打开都能触发关闭
    $(document).on("click", ".ui-dialog-titlebar-close", function() {
        $("#newEventDialog").dialog("close");
    });
});

// 打开对话框的函数，只调用open方法，不重新初始化
function openNewEvent() {
    $("#newEventDialog").dialog("open");
}

额外排查点 #

• 检查jQuery和jQuery UI的版本是否兼容：SharePoint自带的jQuery版本可能比较旧（比如1.x或2.x），要确保jQuery UI的版本和它匹配，避免兼容性问题。
• 确保脚本加载顺序正确：jQuery要在jQuery UI之前加载，自定义脚本要在两者之后加载。

内容的提问来源于stack exchange，提问作者elsni