extend jquery ui dialog (add more options)

Question

how I can create and add new options for jQuery dialog? for example: I like that through on the setting options can control the display of title bar or display the close button.

The script would be like this:

$("#message").dialog({
  showTitle:false,     //new option (hide Title bar)
  showCloseButton:true //new option (show close button)
  modal:true...        //other options
})

You would have to extend the jQuery UI dialog widget and override it's create method so that when a dialog is built, it looks at the additional options and includes or excludes the titlebar and/or close button. You could instead simply include your own custom css that hides them for all dialogs on your page, or, use the .find() and .css methods on the dialog when you create it to hide those pieces. — Kevin B, Jun 05 '12 at 17:48

score 8 · Answer 1 · answered Jan 06 '14 at 04:13

8

Starting from jQuery UI 1.9 , you can extend widgets in a much nicer way without creating a new widget.

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/

See - Redefining Widgets.

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});

$( "<div>" ).dialog();

answered Jan 06 '14 at 04:13

romaninsh

10,606
4
50
70

Hi @romaninsh, i added your code in my project, on page load the popup was opening without pressing button, can i know why, shall i add my jquery extended file after jquery plugin? – jvk Mar 16 '19 at 15:38
Hi @romaninsh, i added your code in my project, on page load the popup was opening without pressing button, can i know why, shall i add my jquery extended file after jquery plugin? – jvk Mar 16 '19 at 15:38

score 6 · Accepted Answer · answered Jun 05 '12 at 18:09

It's a little easier than I expressed in my comment.

// store old method for later use
var oldcr = $.ui.dialog.prototype._create;
// add the two new options with default values
$.ui.dialog.prototype.options.showTitlebar = true;
$.ui.dialog.prototype.options.showClosebutton = true;
// override the original _create method
$.ui.dialog.prototype._create = function(){
    oldcr.apply(this,arguments);
    if (!this.options.showTitlebar) {
       this.uiDialogTitlebar.hide();
    }
    else if (!this.options.showClosebutton) {
       this.uiDialogTitlebar.find(".ui-dialog-titlebar-close").hide();
    }
};

// this is how you use it
$("<div />").dialog({
    showClosebutton: false
});
// or
$("<div />").dialog({
    showTitlebar: false
});

Obviously, if the titlebar is hidden, the close button will also be hidden since it is part of the titlebar.

extend jquery ui dialog (add more options)

2 Answers2

Linked