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


当前回答

隐藏按钮的最佳方法是使用其数据图标属性对其进行过滤:

$('#dialog-id [data-icon="delete"]').hide();

其他回答

如官方页面所示,David建议:

创建样式:

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

然后,您可以简单地将no close类添加到任何对话框中,以隐藏其关闭按钮:

$( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [{
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});

http://jsfiddle.net/marcosfromero/aWyNn/

$('#yourdiv').                 // Get your box ...
  dialog().                    // ... and turn it into dialog (autoOpen: false also works)
  prev('.ui-dialog-titlebar'). // Get title bar,...
  find('a').                   // ... then get the X close button ...
  hide();                      // ... and hide it

您也可以删除标题行:

<div data role=“header”></分区>

其移除关闭按钮。

您可以使用以下代码删除关闭按钮。还有其他的选择,你可能会觉得有用。

$('#dialog-modal').dialog({
    //To hide the Close 'X' button
    "closeX": false,
    //To disable closing the pop up on escape
    "closeOnEscape": false,
    //To allow background scrolling
    "allowScrolling": true
    })
//To remove the whole title bar
.siblings('.ui-dialog-titlebar').remove();

实现的简单方法:(在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
    },
    ....
});