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


当前回答

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

其他回答

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

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

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

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

以上这些都不起作用。真正有效的解决方案是:

$(function(){
  //this is your dialog:
  $('#mydiv').dialog({
    // Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else:
    dialogClass: 'my-extra-class' 
  })
  // Step 2. Hide the close 'X' button on the dialog that you marked with your extra class
  $('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none');
  // Step 3. Enjoy your dialog without the 'X' link
})

请检查它是否适合您。

一旦对元素调用了.dialog(),就可以在任何方便的时候找到关闭按钮(和其他对话框标记),而无需使用事件处理程序:

$("#div2").dialog({                    // call .dialog method to create the dialog markup
    autoOpen: false
});
$("#div2").dialog("widget")            // get the dialog widget element
    .find(".ui-dialog-titlebar-close") // find the close button for this dialog
    .hide();                           // hide it

替代方法:

在对话框事件处理程序中,这是指“dialogged”元素,$(this).parent()是指对话框标记容器,因此:

$("#div3").dialog({
    open: function() {                         // open event handler
        $(this)                                // the element being dialogged
            .parent()                          // get the dialog widget element
            .find(".ui-dialog-titlebar-close") // find the close button for this dialog
            .hide();                           // hide it
    }
});

仅供参考,对话框标记如下所示:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <!-- ^--- this is the dialog widget -->
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span class="ui-dialog-title" id="ui-dialog-title-dialog">Dialog title</span>
        <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
    </div>
    <div id="div2" style="height: 200px; min-height: 200px; width: auto;" class="ui-dialog-content ui-widget-content">
        <!-- ^--- this is the element upon which .dialog() was called -->
    </div>
</div>

此处演示

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

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

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

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