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


当前回答

我最终发现这是有效的(请注意,第三行覆盖了打开的函数,该函数查找按钮并隐藏它):

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

要隐藏所有对话框上的关闭按钮,也可以使用以下CSS:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

其他回答

对于停用类,短代码:

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

可以使用。

document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'

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

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

由于我发现我在应用程序的几个地方都在做这件事,所以我把它包装在一个插件中:

(function ($) {
   $.fn.dialogNoClose = function () {
      return this.each(function () {
         // hide the close button and prevent ESC key from closing
         $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide();
         $(this).dialog("option", "closeOnEscape", false);
      });
   };
})(jQuery)

用法示例:

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();

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

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