JQuery Dialog关闭按钮不显示但可点击，Bootstrap冲突问题求助

问题概况 #

• jQuery Dialog功能正常，但关闭按钮仅显示空白方块，点击该区域可正常关闭对话框
• 调整Bootstrap CDN引入位置后问题未解决
• 移除Bootstrap 5.1.3和4.3.1后，关闭按钮图标恢复正常，但页面整体样式失效

已用代码示例 #

HTML 资源引入代码 #

<!-- chat js department -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<!-- ends here -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="chat.js"></script>

对话框初始化JS代码 #

function make_chat_dialog_box(to_user_id, to_user_name, to_lead_id) {
  var modal_content = '<div id="user_dialog_'+to_user_id+'" class="user_dialog" title="'+to_user_name+'| Lead Id:'+to_lead_id+'">';
  modal_content += '<div style="height:340px; border:1px solid #ccc; overflow-y: scroll; margin-bottom:24px; padding:16px;" class="chat_history" data-touserid="'+to_user_id+'" id="chat_history_'+to_user_id+'"></div>';
  modal_content += '<div class="form-group"><textarea placeholder="type your message here.." name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" class="form-control chat_message"></textarea></div>';
  modal_content += '<div class="form-group" align="right"><button type="button" name="send_chat" id="'+to_user_id+'" data-leadid="'+to_lead_id+'" class="btn btn-info send_chat">Send</button></div></div>';
  $('#user_model_details').html(modal_content);
}

$(document).on('click', '.start_chat', function() {
  var to_user_id = $(this).data('touserid');
  var to_user_name = $(this).data('tousername');
  var to_lead_id = $(this).data('toclientid');

  make_chat_dialog_box(to_user_id, to_user_name, to_lead_id);

  $("#user_dialog_"+to_user_id).dialog({
    autoOpen: false,
    width: 500,
    height: 600,
    dialogClass: 'myTitleClass',
    position: {
      my: "right top",
      at: "right top+350",
      of: window
    }
  });
  $('#user_dialog_'+to_user_id).dialog('open');
});

解决方法 #

核心原因 #

Bootstrap与jQuery UI的样式规则存在冲突，Bootstrap的样式覆盖了jQuery UI关闭按钮的图标背景，导致图标无法正常渲染；同时你同时引入了Bootstrap 4和5两个版本，进一步加剧了样式冲突。

方案1：修复样式优先级 #

在页面末尾添加自定义CSS，强制恢复jQuery UI图标样式：

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  background-image: url("https://code.jquery.com/ui/1.11.1/themes/smoothness/images/ui-icons_222222_256x240.png") !important;
  background-position: -96px -128px !important;
  width: 16px;
  height: 16px;
}

同时建议只保留一个Bootstrap版本（比如Bootstrap 5），删除Bootstrap 4的引入，减少冲突源。

方案2：替换为Bootstrap图标 #

修改Dialog初始化代码，用Bootstrap图标替换默认关闭按钮：

$("#user_dialog_"+to_user_id).dialog({
  autoOpen: false,
  width: 500,
  height: 600,
  dialogClass: 'myTitleClass',
  position: {
    my: "right top",
    at: "right top+350",
    of: window
  },
  closeText: '<span class="bi bi-x-lg" style="font-size:16px; color:#222;"></span>'
});

需要先引入Bootstrap图标CSS：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

方案3：调整CSS加载顺序 #

将jQuery UI的CSS放在Bootstrap CSS之后引入（如果之前没引入Bootstrap CSS，需先添加），让jQuery UI样式覆盖Bootstrap的冲突规则：

<!-- 先引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- 再引入jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

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