你尝试过jQuery UI文档的解决方案吗? https://api.jqueryui.com/dialog/#method-open

正如它所说，你可以这样做……

在CSS中:

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

在JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

您可以使用上述技术删除带有关闭图标的栏，然后自己添加一个关闭图标。

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

//添加这个div到包含你的内容的div

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

当隐藏Dialog标题栏时，我发现，即使display为none，屏幕阅读器仍然会读取它。如果您已经添加了自己的标题栏，它将同时显示这两种内容，从而造成混淆。

我所做的是使用$(selector).remove()从DOM中删除它。现在屏幕阅读器(和其他人)将看不到它，因为它已经不存在了。

这对我很有效

 open: function(event, ui) {
            $(".ui-dialog-titlebar", $(this).parent())
              .hide();

Full

$speedbump.dialog({
  dialogClass: 'speedbump-container',
  autoOpen: false,
  closeOnEscape: false,
  modal: true,
  resizable: false,
  draggable: false,
  create: function () {        
      $speedbump
        .closest('.ui-dialog')
        .attr('id', 'speedbump-container');
  },
  open: function(event, ui) {
    $(".ui-dialog-titlebar", $(this).parent())
      .hide();
}

我认为最好的解决方案是使用选项dialogClass。

jquery UI文档的一个摘录:

在init: $('.selector')期间。dialog({dialogClass: 'noTitleStuff'});

或者在init之后。：

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

所以我创建了一些对话框选项dialogClass='noTitleStuff'和css像这样:

.noTitleStuff .ui-dialog-titlebar {display:none}

太简单了!!但是我花了1天的时间来思考为什么我之前的id->类钻井方法不起作用。事实上，当你调用.dialog()方法时，你转换的div成为另一个div(真正的对话框div)的孩子，可能是标题栏div的“兄弟”，所以很难尝试从前者开始寻找后者。

转到你的jquery-ui.js(在我的情况下是jquery-ui-1.10.3.custom.js)并搜索this._createTitlebar();并对其进行注释。

现在你的任何一个对话框都会显示标题。如果你想自定义标题，只需去_createTitlebar();并编辑其中的代码。

by