How do I remove the close button (the X in the top left corner) on a dialog box created by jQueryUI?
+9
A:
You can use CSS to hide the close button.
What I mean is that CSS can be used directly instead of JavaScript
<style>
.ui-dialog-titlebar-close{
display: none;
}
</style>
Also I can not accept the answer I am not wrong but -1, I just tell you approach, I do not intend to tell you the specific answer.
I do not know if you have not heard of a proverb that is
"if you give man a fish,he will have a single meal,but if you teach man to fish, feed him whole life."
Gordian Yuan
2009-05-22 07:58:52
-1 for an answer that is accurate but ultimately useless
Robert MacLean
2009-05-22 11:12:00
I never said you were wrong, in fact I said you were accurate. However a CSS solution to the problem is useless in this scenario.
Robert MacLean
2009-09-22 14:48:18
It isn't obvious (at all) from your question that a CSS solution wouldn't solve your problem.
Zachary
2010-08-18 14:35:38
I don't understand the "useless" comment here. The answer seems reasonable; however, the styles should cascade so that the change isn't global to all dialogs. For example, .myDisabledModal .ui-dialog-titlebar-close {display: none;}
Brett
2010-10-12 14:25:04
+49
A:
I have found this worked in the end (note the third line overriding the open function which find the button and hides it):
$("#div2").dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
Robert MacLean
2009-05-22 11:20:08
I was in the same situation. This answer was exactly what I needed. Thank you.
Andrew
2009-09-21 20:33:16
`$(".ui-dialog-titlebar-close", ui).hide();` to hide the button for **this** dialog only.
Anton
2010-02-08 11:42:29
@Johnldol, do you use it in the context of the Robert's answer above? It should work since `ui` is defined as a function argument. See also http://api.jquery.com/jQuery/#jQuery1
Anton
2010-05-24 02:14:44
I couldn't get it to work from the ui parameter either. I ended up using: $(".ui-dialog-titlebar-close", $(this).parent()).hide();
Nigel
2010-06-08 16:00:03
+13
A:
the "best" answer will not be good for multiple dialogs. here is a better solution.
open: function(event, ui) {
//hide close button.
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},
Earl
2009-11-26 10:38:21
A:
open: function(event, ui) { //hide close button. $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){ $("#dhx_combo_list").remove();
});
},
yaaaa.....its realy working ....I catched the close event of the dialog box. In above coading it is remove the div(#dhx_combo_list). great...thanks u all..
ruwan
2009-12-10 09:59:57
+1
A:
$("#div2").dialog({ closeOnEscape: false, open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();} });
Alok Vad
2010-05-13 11:26:14