下一种形式解决了我的问题。

$('#btnShow').click(function() { $("#basicModal").dialog({ modal: true, height: 300, width: 400, create: function() { $(".ui-dialog").find(".ui-dialog-titlebar").css({ 'background-image': 'none', 'background-color': 'white', 'border': 'none' }); } }); }); #basicModal { display: none; } <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" /> <div id="basicModal"> Here your HTML content </div> <button id="btnShow">Show me!</button>

实际上还有另一种方法，直接使用对话框小部件:

您可以这样获得对话框小部件

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

然后做

$dlgWidget.find(".ui-dialog-titlebar").hide();

仅在该对话框中隐藏标题栏

并且在一行代码中(我喜欢链接):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

不需要在对话框中添加一个额外的类，直接就可以了。对我来说没问题。

当隐藏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的“兄弟”，所以很难尝试从前者开始寻找后者。

试着用

$("#mydialog").closest(".ui-dialog-titlebar").hide();

这将隐藏所有对话框的标题

$(".ui-dialog-titlebar").hide();

当初始化对话框时，你可以使用jquery在使用dialogClass后隐藏标题栏。

init期间:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

通过使用这种方法，你不需要改变你的css文件，这也是动态的。