您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

EasyUI Dialog 彈出空白：Table 樣式衝突排查

編輯：程式設計綜合問答

現象

Dialog 內容為空白，且 `

` 顯示在主頁面而非 Dialog 內。移除 `

` 後正常。

核心原因：Bootstrap 與 EasyUI 樣式衝突

頁面引入 ``，Bootstrap 的 `table` 樣式（`border-collapse`、`display` 等）覆蓋 EasyUI Dialog 內容容器樣式，導致：

Dialog 內容區高度塌陷（`height: 0`）。
Table 脫離 Dialog 容器流向，顯示在頁面頂部。

排查步驟

F12 開發者工具 → Elements → 找到 Dialog 容器 (`.dialog-content`、`.panel-body`)。
檢查 Computed Styles：`height`、`overflow`、`display` 是否被 Bootstrap 重設。
嘗試在 Dialog `
` 加入 `style="overflow:auto;"` 或強制高度。

解決方案

隔離樣式（推薦）：在 Dialog 內容最外層包裹 `

`，並在 CSS 中重置 table 樣式：

.easyui-dialog-content table {
    display: table;           /* 覆蓋 Bootstrap 的 display: block 等 */
    border-collapse: separate; /* 重置 */
    width: auto;              /* 防撐大 */
}

避免在 Dialog 直接放 `

`**：用 `

` + EasyUI `datagrid`/`propertygrid` 替代原生表格。

調整引入順序**：先引入 Bootstrap，再引入 EasyUI，讓 EasyUI 樣式優先（但可能影響 Bootstrap 元件）。

使用 EasyUI Panel 而非 Dialog**：`$('#dlg').panel({...})` 較輕量，樣式衝突較少。

最佳實踐

專案中**擇一 UI 框架**（Bootstrap 或 EasyUI），避免混用。
若必須混用，建立 **CSS 隔離命名空間**（如 `.bootstrap-scope`、`.easyui-scope`），所有元件包裹在對應 scope 內。
Dialog 內容建議用 EasyUI 內建元件 (`datagrid`、`form`、`tree`)，而非原生 HTML 表格。