如何在Excel Add-in中实现半透明非遮挡加载对话框？

要实现类似Excel Online中Copy link->To Sheet的半透明、不遮挡背景内容的加载对话框，你不需要依赖Office Dialog的默认样式，而是通过自定义对话框页面的CSS来模拟效果，具体步骤如下：

1. 自定义对话框页面样式 #

在你加载的对话框页面（https://localhost:3000/#/dialog/loading）中，添加以下CSS和HTML结构，实现半透明背景和轻量化加载动画：

CSS（loading.css） #

body {
  margin: 0;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景，可调整透明度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: Segoe UI, sans-serif;
  border: none;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0078d4; /* 匹配Office主题色 */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 15px;
  color: #333;
  font-size: 14px;
}

HTML结构 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>处理中</title>
  <link rel="stylesheet" href="loading.css">
</head>
<body>
  <div class="loading-spinner"></div>
  <div class="loading-text">处理中，请稍候...</div>
</body>
</html>

2. 调整Office.js调用参数 #

修改displayDialogAsync的配置，优化对话框的显示方式：

Office.context.ui.displayDialogAsync("https://localhost:3000/#/dialog/loading", {
  width: 20,          // 调整为合适的百分比，避免对话框过大
  height: 20,
  displayInIframe: true, // 桌面客户端中嵌入显示，更贴近在线版原生效果
  title: "处理中"     // 设置对话框标题
}, function (asyncResult: Office.AsyncResult<Office.Dialog>): void {
  if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
    const dialog = asyncResult.value;
    // 任务完成后关闭对话框的示例：
    // yourAsyncTask().then(() => dialog.close());
  } else {
    console.error("对话框加载失败:", asyncResult.error.message);
  }
});

关键说明 #

• Excel自带的加载提示是原生系统组件，Add-in无法直接调用，但通过自定义半透明背景的对话框页面，可以高度模拟该效果。
• displayInIframe参数会让对话框在桌面Excel客户端中以iframe形式嵌入显示（而非独立弹出窗口），更贴近在线版的视觉体验。
• 可以根据需求调整背景透明度（rgba的第四个值）、加载动画样式和对话框尺寸，匹配你的Add-in风格。

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