title: jQueryUI extending Dialog
body: <p>I am trying with the code below to extend jQueryUI Dialog to get to something like this:http://www.schillmania.com/projects/dialog/png/</p>
  
  <p>Everything works fine except the fact that when I click the button to close the dialog nothing happens.</p>
  
  <pre><code>(function( $, undefined ) {
  
      var uiDialogClasses = "ui-dialog ui-widget ui-widget-content roundbox";
  
      $.widget("custom.mydialog", $.ui.dialog, {
  
          _super_create: $.ui.dialog.prototype._create,
          _create: function() {
              this.originalTitle = this.element.attr( "title" );
              // #5742 - .attr() might return a DOMElement
              if ( typeof this.originalTitle !== "string" ) {
                  this.originalTitle = "";
              }       
              this.oldPosition = { 
                  parent: this.element.parent(), 
                  index: this.element.parent().children().index( this.element ) 
              };
              this.options.title = this.options.title || this.originalTitle;
              var self = this,
                  options = self.options,
  
                  title = options.title || "&amp;#160;",
                  titleId = $.ui.dialog.getTitleId( self.element ),
  
                  uiDialog = ( self.uiDialogOriginal = $( '&lt;div class="lbasDialog"&gt;' ) )
                      //.addClass( uiDialogClasses + options.dialogClass)
                      // setting tabIndex makes the div focusable
                      .attr( "tabIndex", -1)
                      .keydown(function( event ) {
                          if ( options.closeOnEscape &amp;&amp; !event.isDefaultPrevented() &amp;&amp; event.keyCode &amp;&amp;
                                  event.keyCode === $.ui.keyCode.ESCAPE ) {
                              self.close( event );
                              event.preventDefault();
                          }
                      })
                      .attr({
                          role: "dialog",
                          "aria-labelledby": titleId
                      })
                      .mousedown(function( event ) {
                          self.moveToTop( false, event );
                      })
                      .appendTo( "body" )
                      .wrap('&lt;div class="dialog"&gt;&lt;div class="bd"&gt;&lt;div class="c"&gt;&lt;div class="s"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;')
  
                      self.uiDialog = $('div.dialog');
  
                       $('div.dialog')
                         .prepend('&lt;div class="hd"&gt;'+
                           '&lt;div class="c"&gt;&lt;/div&gt;&lt;/div&gt;')
                         .append('&lt;div class="ft"&gt;'+
                           '&lt;div class="c"&gt;&lt;/div&gt;&lt;/div&gt;')
                         .addClass( uiDialogClasses + options.dialogClass);
  
  
  
                  uiDialogContent = self.element
                      .show()
                      .removeAttr( "title" )
                      .addClass( "ui-dialog-content ui-widget-content" )
                      .appendTo( uiDialog ),
  
                  uiDialogTitlebar = ( self.uiDialogTitlebar = $( "&lt;div&gt;" ) )
                      .addClass( "ui-dialog-titlebar  ui-widget-header  " +
                          "ui-corner-all  ui-helper-clearfix" )
                      .prependTo( uiDialog ),
  
                  uiDialogTitlebarClose = $( "&lt;a href='#'&gt;&lt;/a&gt;" )
                      .addClass( "ui-dialog-titlebar-close  ui-corner-all" )
                      .attr( "role", "button" )
                      .click(function( event ) {
                          event.preventDefault();
                          self.close( event );
                      })
                      .appendTo( uiDialogTitlebar ),
  
                  uiDialogTitlebarCloseText = ( self.uiDialogTitlebarCloseText = $( "&lt;span&gt;" ) )
                      .addClass( "ui-icon ui-icon-closethick" )
                      .text( options.closeText )
                      .appendTo( uiDialogTitlebarClose ),
  
                  uiDialogTitle = $( "&lt;span&gt;" )
                      .addClass( "ui-dialog-title" )
                      .attr( "id", titleId )
                      .html( title )
                      .prependTo( uiDialogTitlebar );
  
              uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection();
              //this._hoverable( uiDialogTitlebarClose );
              //this._focusable( uiDialogTitlebarClose );
  
              if ( options.draggable &amp;&amp; $.fn.draggable ) {
                  self._makeDraggable();
              }
              if ( options.resizable &amp;&amp; $.fn.resizable ) {
                  self._makeResizable();
              }
  
              self._createButtons( options.buttons );
              self._isOpen = false;
  
              if ( $.fn.bgiframe ) {
                  uiDialog.bgiframe();
              }
          },
          _createButtons: function( buttons ) {
              var self = this,
                  hasButtons = false;
  
              // if we already have a button pane, remove it
              self.uiDialogOriginal.find( ".ui-dialog-buttonpane" ).remove();
  
              if ( typeof buttons === "object" &amp;&amp; buttons !== null ) {
                  $.each( buttons, function() {
                      return !(hasButtons = true);
                  });
              }
              if ( hasButtons ) {
                  var uiDialogButtonPane = $( "&lt;div&gt;" )
                          .addClass( "ui-dialog-buttonpane  ui-widget-content ui-helper-clearfix" ),
                      uiButtonSet = $( "&lt;div&gt;" )
                          .addClass( "ui-dialog-buttonset" )
                          .appendTo( uiDialogButtonPane );
  
                  $.each( buttons, function( name, props ) {
                      props = $.isFunction( props ) ?
                          { click: props, text: name } :
                          props;
                      var button = $( "&lt;button type='button'&gt;" )
                          .attr( props, true )
                          .unbind( "click" )
                          .click(function() {
                              props.click.apply( self.element[0], arguments );
                          })
                          .appendTo( uiButtonSet );
                      if ( $.fn.button ) {
                          button.button();
                      }
                  });
                  self.uiDialogOriginal.addClass( "ui-dialog-buttons" );
                  uiDialogButtonPane.appendTo( self.uiDialogOriginal );
              } else {
                  self.uiDialogOriginal.removeClass( "ui-dialog-buttons" );
              }
          }
      });
  
  }( jQuery ) );
  </code></pre>
  
  <p>here is how I do use it:
  and the issue seems to be that <code>$(this).dialog('close');</code> dose not call the close function at all....</p>
  
  <pre><code>    var btns = {};
      btns[$.i18n.prop('buttons.ok')] = function() {
          $(this).dialog('close');
      };
  
      var opt = options || {};
  
      if(opt.open==undefined)
          opt.open = true;
  
      $dialog = $('&lt;div class="0m4r"&gt;&lt;/div&gt;');
      $dialog.mydialog({
          title: opt.title || '',
          bgiframe: opt.bigFrame || true,
          modal: opt.modal!=undefined?opt.modal:glbmodal,
          overlay :{
              backgroundColor :'#000',
              opacity :0.8
          },
          buttons: opt.buttons || btns,
          width: opt.width || $(document).width()/2,
          height: opt.height || $(document).height()/2,
          position: 'center',
          autoOpen: opt.open, 
          close: function(){
              $(this).dialog('destroy');
              $(this).remove();
              $('.dialog').filter(function(){
                  if ($(this).text() == "")
                  {
                      return true;
                  }
                  return false;
              }).remove();
          }
      });
  
  
      if(opt.content){
          $dialog.html(opt.content);
      }
      return $dialog;
  };
  </code></pre>
  
  <p>Thanks!</p>