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


当前回答

我是单行本的粉丝(他们在哪里工作!)。以下是对我有效的方法:

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

其他回答

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

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

这里还有一个选项,就是使用CSS,它不会覆盖页面上的每个对话框。

CSS

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

HTML

<div class="selector" title="No close button">
    This is a test without a close button
</div>

Javascript。

$( ".selector" ).dialog({ dialogClass: 'no-close' });

工作示例

$(".ui-button-icon-only").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
    },
    ....
});

我觉得这样更好。

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}