Question

我想提出一个动态对话框......例如

var newDiv = $(document.createElement('div'));

$(newDiv).html('Hello World');
$(newDiv).dialog({
    closeOnEscape: false,
    draggable: false,
    modal: true,
    resizable: false,
    width: 725

});

一切都很棒但是我的动态对话框有一个我不想要的标题。当然，我可以通过修改以下CSS类来删除它... .ui-dialog-titlebar {display:none}

但是我只希望对话框的这个实例没有标题，我不希望将它应用于我系统中的所有其他对话框。在动态对话框中删除标题的最佳方法是什么？我正在考虑将CSS方法改为对话，就像这样... $（newDiv）.dialog（{... stuff}）。css（）但到目前为止没有任何工作。

我认为问题是由于我的动态div没有ID，很难引用任何想法？

请注意，如果我没有详细描述我的问题，请说出来，我会改写/扩展......我已经工作了好几个小时而且我开始疯了......

请注意清除：我想删除整个标题栏和样式...不只是标题通常是空字符串。

Answer 1

您可以在动态对话框中添加一个名为“dialog-no-title”的css类，然后在该类dialog-no-title {display:none}下添加相关的css。

要向DOM元素添加类，请参阅jQuery文档。它看起来像这样：.addClass("dialog-no-title")。我猜你可以这样做：

var newDiv = $(document.createElement('div'));  

$(newDiv).html('Hello World');

$(newDiv).dialog({
    closeOnEscape: false,
    draggable: false,
    modal: true,
    resizable: false,
    width: 200,
    dialogClass: 'dialog-no-title'
});

编辑：更新了代码示例以反映评论。这里有一个适合你的jsFiddle：http://jsfiddle.net/nj2Q9/21/

干杯，

詹姆斯

Answer 2

正如Alex K.建议你做的那样：

$(newDiv).dialog({
    closeOnEscape: false,
    draggable: false,
    modal: true,
    resizable: false,
    width: 725,
    dialogClass: 'ui-dialog-noheader' 
});

然后在你的CSS中

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

其中的目标是noheader类中的对话框标题栏。

如何在动态对话框中删除jQuery对话框标题

2 个答案: