UI Dialog with option to hide Close Button

UI Dialog with option to hide Close Button

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
*/
  1. options: {
  2. hideCloseButton: false,
  3. .....


/*
      THEN - Add the condition
*/

  1. // support: IE
  2. // Use type="button" to prevent enter keypresses in textboxes from closing the
  3. // dialog in IE (#9312)
  4. if( this.options.hideCloseButton )
  5. {
  6. this.uiDialogTitlebarClose = $( "<span></span>" );
  7. }
  8. else
  9. {
  10. this.uiDialogTitlebarClose = $( "<button type='button'></button>" )
  11. .button({
  12. label: this.options.closeText,
  13. icons: {
  14. primary: "ui-icon-closethick"
  15. },
  16. text: false
  17. })
  18. .addClass( "ui-dialog-titlebar-close" )
  19. .appendTo( this.uiDialogTitlebar );
  20. this._on( this.uiDialogTitlebarClose, {
  21. click: function( event ) {
  22. event.preventDefault();
  23. this.close( event );
  24. }
  25. });
  26. }

/*
      LAST - Use it in a dialog
*/
  1. $('#dialog').dialog({
  2.       hideCloseButton: true
  3. })



Please feel free to use it and give feed back.