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

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

我认为最好的解决方案是使用选项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的“兄弟”，所以很难尝试从前者开始寻找后者。

这招对我很管用:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

我发现使用open事件并从那里隐藏标题栏更有效，更可读。我不喜欢使用页全局类名搜索。

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

简单。

我在我的项目中使用这个

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

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

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');
     });