如何删除jQueryUI创建的对话框上的关闭按钮(右上角的X)?
当前回答
对于多个对话框,“最佳”答案并不好。这里有一个更好的解决方案。
open: function(event, ui) {
//hide close button.
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},
其他回答
由于我发现我在应用程序的几个地方都在做这件事,所以我把它包装在一个插件中:
(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();
如官方页面所示,David建议:
创建样式:
.no-close .ui-dialog-titlebar-close {
display: none;
}
然后,您可以简单地将no close类添加到任何对话框中,以隐藏其关闭按钮:
$( "#dialog" ).dialog({
dialogClass: "no-close",
buttons: [{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
}]
});
您可以使用以下代码删除关闭按钮。还有其他的选择,你可能会觉得有用。
$('#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();
您也可以删除标题行:
<div data role=“header”></分区>
其移除关闭按钮。
一旦对元素调用了.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>
此处演示
推荐文章
- 如何嵌入HTML到IPython输出?
- 如何删除/忽略:悬停css风格的触摸设备
- HTML5文本区域占位符不出现
- 添加javascript选项选择
- 为iPad和iPhone设计输入按钮
- HTML tabindex属性是什么?
- 我如何捕捉Ajax查询后错误?
- HTML按钮调用MVC控制器和动作方法
- jQuery:什么是限制“数字”仅输入文本框的最佳方法?(允许使用小数点)
- 在window.setTimeout()发生之前取消/终止
- Div高度100%,并扩展到适合内容
- 当鼠标经过表中的一行时,将光标更改为手
- HTML实体中间的点
- 检测当用户滚动到底部的div与jQuery
- 使用:before和:after CSS选择器插入HTML