升级到Bootstrap 4后jQuery Dialog对话框内容不显示问题求解

问题根源 #

该问题由Bootstrap 4 与旧版jQuery UI的样式冲突导致：Bootstrap 4 对原生[hidden]属性添加了display: none !important的全局规则，优先级远高于jQuery UI Dialog给内容区设置的显示样式。你绑定Dialog的容器自带hidden属性，Dialog渲染时无法覆盖该规则的隐藏效果，因此仅底部按钮正常展示，内容区被强制隐藏。

解决思路 #

• 方案1：弹窗打开时移除hidden属性
  在Dialog的配置项中新增open回调，每次打开弹窗时主动清除内容容器的hidden属性，修改后的初始化代码如下：

var themedialog = $("#theme-change-form").dialog({
    autoOpen: false,
    height: 'auto',
    width: 450,
    modal: true,
    buttons: {
        "Update Theme": updateTheme,
        Cancel: function() {
            themedialog.dialog("close");
        }
    },
    // 新增以下回调逻辑
    open: function() {
        $(this).removeAttr('hidden');
    },
    close: function() {
        $('.subtheme-button').removeClass('active');
        $('.subtheme-button.selected').addClass('active');
    }
});

• 方案2：新增CSS覆盖冲突规则
  在全局样式中添加以下代码，强制jQuery Dialog的内容区正常显示：

.ui-dialog-content[hidden] {
    display: block !important;
}

• 方案3：替换隐藏属性实现方式
  把原Dialog容器的hidden原生属性替换为Bootstrap内置的d-none隐藏类，修改后的HTML代码如下：

<div class="d-none" id="theme-change-form">

jQuery UI渲染Dialog时会自动处理该类的显示控制，不会出现优先级冲突问题。

• 方案4：从根源解决组件冲突
  你当前使用的jQuery UI 1.11.4版本发布早于Bootstrap 4，未做适配，可选择升级到jQuery UI 1.12及以上版本；也可以调整JS引入顺序，先引入Bootstrap JS再引入jQuery UI JS，避免同名组件冲突；如果改动成本允许，直接将jQuery UI Dialog替换为Bootstrap 4原生的Modal组件，可彻底消除组件兼容问题。

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