自定义Dialog无法显示ui-icon-info图标，寻求技术帮助

使用下述JS代码实现自定义Dialog时，无法显示info图标（ui-icon-info），代码及依赖如下：

JS代码 #

const summary = "Summary text";
const info = "Info text";
const act = "Act text";
const title = "Title";


$(document).ready(function() {
  $('<div id="custom-alert" >' + '<br><b>' + summary + '</b><br><br>' + info + '<br><br>' + act + '</div>').appendTo('body');
  $('#custom-alert').dialog({
    title: title,
    modal: true,
    width: 600,
    height: 320,
    icon: "ui-icon-info",
    closeText: '',
    buttons: {
      "OK": function() {
        $(this).dialog('destroy').remove()
      }
    }
  });
});

依赖资源 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css" />

当前效果：Dialog标题栏仅显示文字标题，无info图标。

问题原因 #

jQuery UI的Dialog组件没有名为icon的官方配置参数，直接在初始化选项中设置icon: "ui-icon-info"不会生效。

解决方法 #

可以通过以下两种方式添加info图标：

方法一：初始化后手动向标题栏添加图标元素

在Dialog初始化完成后，获取标题栏元素并添加带有ui-icon ui-icon-info类的span标签，利用jQuery UI自带的图标样式：

修改后的JS代码：

const summary = "Summary text";
const info = "Info text";
const act = "Act text";
const title = "Title";


$(document).ready(function() {
  $('<div id="custom-alert" >' + '<br><b>' + summary + '</b><br><br>' + info + '<br><br>' + act + '</div>').appendTo('body');
  
  const dialog = $('#custom-alert').dialog({
    title: title,
    modal: true,
    width: 600,
    height: 320,
    closeText: '',
    buttons: {
      "OK": function() {
        $(this).dialog('destroy').remove()
      }
    }
  });
  
  // 向标题栏添加info图标
  dialog.closest('.ui-dialog').find('.ui-dialog-titlebar').prepend('<span class="ui-icon ui-icon-info" style="margin-right: 8px;"></span>');
});

方法二：利用dialogClass配置+自定义CSS

给Dialog添加自定义类，通过CSS伪元素插入图标：

1. 修改Dialog初始化配置，添加dialogClass：

$('#custom-alert').dialog({
  // 其他原有配置
  dialogClass: 'info-icon-dialog'
});

2. 添加CSS样式（可放在<style>标签中）：

.info-icon-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
}

.info-icon-dialog .ui-dialog-titlebar::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 8px;
  /* 复用jQuery UI自带的info图标背景图 */
  background: url("https://code.jquery.com/ui/1.14.1/themes/base/images/ui-icons_444444_256x240.png") -64px -144px no-repeat;
}

两种方法都能让info图标正常显示在标题栏左侧。

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