Search jQuery

jQuery Forum

UI Dialog with option to hide Close Button

in Using jQuery UI • 8 years ago

I have modified jquery-ui Dialog source code to add an option that allows to hide the close Button. Very handy for various cases.

I use jQuery UI Dialog 1.11.2

Here is the code:

FIRST - Add the option in jquery-ui source code

options: {
hideCloseButton: false,
.....

THEN - Add the condition

// support: IE
// Use type="button" to prevent enter keypresses in textboxes from closing the
// dialog in IE (#9312)
if( this.options.hideCloseButton )
{
this.uiDialogTitlebarClose = $( "<span></span>" );
}
else
{
this.uiDialogTitlebarClose = $( "<button type='button'></button>" )
.button({
label: this.options.closeText,
icons: {
primary: "ui-icon-closethick"
},
text: false
})
.addClass( "ui-dialog-titlebar-close" )
.appendTo( this.uiDialogTitlebar );
this._on( this.uiDialogTitlebarClose, {
click: function( event ) {
event.preventDefault();
this.close( event );
}
});
}

LAST - Use it in a dialog

$('#dialog').dialog({
hideCloseButton: true
})

Please feel free to use it and give feed back.

Replies(7)

jakecigar

Re: UI Dialog with option to hide Close Button

8 years ago

Why not just hide the button with CSS?

JΛ̊KE

Gi Phoria

Re: Re: UI Dialog with option to hide Close Button

8 years ago

It is a good and the fastest solution also to hide it by using CSS, but personally I prefer a pure js solution.

And also I believe this post covers a little understanding of how UI works from the inside, and can give anyone new in jqueryui an option to adjust these plugins as they need.

jakecigar

Re: UI Dialog with option to hide Close Button

8 years ago

It is a bad thing to modify parts of jQuery. When you have left the job, and someone inherits the site, they may not know how to upgrade to a new version or even that the version they inherited was patched.

You can use CSS or the supplied callback to hide the close button.

JΛ̊KE

Gi Phoria