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


当前回答

我喜欢重写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
});

其他回答

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

init期间:

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

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

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

试试这个

$("#ui-dialog-title-divid").parent().hide();

将divid替换为相应的id

这是如何做到的。

进入themes文件夹> base >打开jquery.ui.dialog.css

找到

追随者

如果你不想显示标题栏,那么只需设置display:none,就像我在下面所做的那样。

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

头衔也是如此。

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

现在是关闭按钮你也可以设置它为none或者你可以设置它

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

我做了很多搜索,但一无所获,然后我有了这个想法在我的脑海里。 然而,这将影响整个应用程序没有关闭按钮,对话框的标题栏,但你也可以通过使用jquery和添加和设置css来克服这个问题

这是它的语法

$(".specificclass").css({display:normal})

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

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

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

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

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

如果你有多个对话框,你可以使用这个:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });