有没有可能打开一个jQuery UI对话框没有标题栏?


当前回答

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

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

简单。

其他回答

我相信你可以用CSS隐藏它:

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

或者,你可以使用dialogClass选项将其应用于特定的对话框:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
    display: none;
}

看看“主题化”对话。上面的建议使用了dialogClass选项,该选项似乎正在被一种新的方法取代。

对我来说,我仍然想使用重新调整大小的角,只是不想看到对角线。我使用

$(".ui-resizable-handle").css("opacity","0");

我刚意识到我回答错问题了。不辜负我的名字:(

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

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

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

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

然后做

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

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

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

$('#example').dialog('widget').find(".ui-dialog-titlebar").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();