如何删除jQueryUI创建的对话框上的关闭按钮(右上角的X)?


当前回答

您可以使用CSS来隐藏关闭按钮,而不是JavaScript:

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

如果你不想影响所有的情态动词,你可以使用如下规则

.hide-close-btn .ui-dialog-titlebar-close{
    display: none;
}

并将.hide close btn应用于对话框的顶部节点

其他回答

对于那些正在使用DialogExtendjQueryExtension的用户,您可以使用可关闭选项来管理此功能以及此体面扩展提供的许多其他调整。

注意,如果您已经在使用DialogExtend,那么任何前述的DialogCSS黑客在初始化时都会被DialogExtend拦截。

对于多个对话框,“最佳”答案并不好。这里有一个更好的解决方案。

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

实现的简单方法:(在Javascript中执行此操作)

$("selector").dialog({
    autoOpen: false,
    open: function(event, ui) {   // It'll hide Close button
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    },
    closeOnEscape: false,        // Do not close dialog on press Esc button
    show: {
        effect: "clip",
        duration: 500
    },
    hide: {
        effect: "blind",
        duration: 200
    },
    ....
});

使用这个纯CSS行怎么样?我发现对于具有给定Id的对话框,这是最干净的解决方案:

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }

Dialog小部件添加的关闭按钮具有类“ui Dialog titlebar close”,因此在首次调用.Dialog()后,您可以使用如下语句再次删除关闭按钮:它起作用了。。

$( 'a.ui-dialog-titlebar-close' ).remove();