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


当前回答

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

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

在CSS中:

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

在JS:

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

其他回答

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

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

by

我想出了一个动态删除标题栏的解决方案。

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

这将在对话框渲染后删除所有带有'ui-dialog-titlebar'类的元素。

试着用

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

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

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

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

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

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

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

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

我喜欢重写jQuery小部件。

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

你现在可以设置是否显示标题栏

   $('#mydialog').dialog({
      headerVisible: false // or true
});