jquery UI对话框:如何在没有标题栏的情况下初始化？

Question

是否可以打开没有标题栏的jQuery UI对话框？

Answer 1

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

来自jquery UI文档的摘录:

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

或者如果你想在init之后.:

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

所以我创建了一个带有选项dialogClass ='noTitleStuff'和css的对话框:

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

太简单 !!但我花了一天的时间来思考为什么我以前的id->类钻孔方法不起作用.事实上,当你调用.dialog()方法时,你变换的div变成了另一个div(真正的对话框div)的孩子,可能是div的'兄弟' titlebar,所以从前者开始尝试找到后者是非常困难的.

Answer 2

我想出了动态删除标题栏的修复方法.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

这将在渲染对话框后使用类"ui-dialog-titlebar"删除所有元素.

Answer 3

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

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

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

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

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

查看" 主题化 "对话框.上面的建议使用了这个dialogClass选项,它似乎是出于支持新方法的选择.

Answer 4

我在我的项目中使用它

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

Answer 5

这对我有用:

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

Answer 6

尝试使用

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

这将隐藏所有对话框标题

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

Answer 7

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

你可以这样得到Dialog Widget

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

然后呢

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

titlebar仅隐藏该对话框内的内容

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

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

无需以这种方式向对话框添加额外的类,只需直接进行操作即可.工作对我来说很好.

Answer 8

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

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

简单.