Friday, 30 June 2017

How to remove close button on jquery UI dialog

Leave a Comment
This tutorial tells us how to remove close button ('X' button at top right side of the jquery UI dialog).
1.This close button is by default will displayed in the ui dialog.There is no options in dialog also.So we have to do it using CSS.
2.Before to implement code we have to know about the Open event in jquery dialog.
open: This event is triggered when dialog is opened.
syntax:
$( ".selector" ).dialog({
  open: function( event, ui ) {}
});
3.Now come to the actual question to remove the close button ..use this below code..
$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    }
});
4.Above code removes the close button on particular dialog.
5.To hide the close button on all dialogs you can use below CSS code..
.ui-dialog-titlebar-close {
    visibility: hidden;
}
Conclusion:
I hope  this tip or tutorial will help you in real time development...(i already come across this issue in my work)..

0 comments:

Post a Comment