如何删除jQuery UI对话框上的closuresbutton？
如何删除由jQuery UI创build的对话框中的closuresbutton（右上angular的X ）？
我发现这个工作到底（注意第三行覆盖打开的function，findbutton并将其隐藏）：
$("#div2").dialog({ closeOnEscape: false, open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog | ui).hide(); } }); 要隐藏所有对话框上的closuresbutton，您也可以使用以下CSS：
.ui-dialog-titlebar-close { visibility: hidden; }
这里还有一个选项，就是使用不会超过页面上每个对话框的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' });
工作示例
“最好”的答案不会对多个对话有好处。 这里是更好的解决scheme。
open: function(event, ui) { //hide close button. $(this).parent().children().children('.ui-dialog-titlebar-close').hide(); },
您可以使用CSS隐藏closuresbutton而不是JavaScript：
.ui-dialog-titlebar-close{ display: none; }
正如官方页面上显示的和David所build议的那样：
创build风格：
.no-close .ui-dialog-titlebar-close { display: none; }
然后，您可以简单地将no-close类添加到任何对话框以隐藏它的closuresbutton：
$( "#dialog" ).dialog({ dialogClass: "no-close", buttons: [{ text: "OK", click: function() { $( this ).dialog( "close" ); } }] });
我觉得这样比较好。
open: function(event, ui) { $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide(); }
在元素上调用.dialog() ，可以在任何方便的时候findclosuresbutton（以及其他对话框标记），而无需使用事件处理程序：
$("#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
备选方法：
在对话框事件处理程序中， this指的是元素被“对话”， $(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>
在这里演示
罗伯特·麦克林（Robert MacLean）的回答对我来说并不奏效
这对我来说确实有效：
$("#div").dialog({ open: function() { $(".ui-dialog-titlebar-close").hide(); } });
$("#div2").dialog({ closeOnEscape: false, open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();} });
以上都不是。 真正有效的解决scheme是：
$(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 })
请检查它是否适用于您。
隐藏button的最好方法是使用它的数据图标属性进行过滤：
$('#dialog-id [data-icon="delete"]').hide();
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
open: function(event, ui) { //hide close button. $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){ $("#dhx_combo_list").remove(); }); },
yaaaay！ 这真的很有用！ 我赶上对话框的closures事件。 在上面的代码中，它删除了div（#dhx_combo_list）。
太好了，谢谢你们！
对于closures类，短代码：
$(".ui-dialog-titlebar-close").hide();
可能用过了。
由Dialog控件添加的closuresbutton具有类“ui-dialog-titlebar-close”，所以在初始调用.dialog（）之后，可以使用类似下面的语句再次移除closuresbutton：它工作正常。
$( 'a.ui-dialog-titlebar-close' ).remove();
$(".ui-button-icon-only").hide();
您也可以删除标题行：
<div data-role="header">...</div>
这将删除closuresbutton。
document.querySelector('.ui-dialog-titlebar-close').style.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();
您可以使用下面的代码删除closuresbutton。 还有其他的select，你可能会战斗有用的。
$('#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();
