jQueryUI простирающегося Диалог

Question

Я пытаюсь с кодом ниже, чтобы расширить jQueryUI диалог, чтобы получить что-то вроде этого: HTTP: //www.schillmania.com/projects/dialog/png/

Все работает отлично, за исключением того факта что, когда я нажимаю кнопку, чтобы закрыть диалог, ничего не происходит.

(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 || " ", 
       titleId = $.ui.dialog.getTitleId(self.element), 

       uiDialog = (self.uiDialogOriginal = $('<div class="lbasDialog">')) 
        //.addClass(uiDialogClasses + options.dialogClass) 
        // setting tabIndex makes the div focusable 
        .attr("tabIndex", -1) 
        .keydown(function(event) { 
         if (options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && 
           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('<div class="dialog"><div class="bd"><div class="c"><div class="s"></div></div></div></div>') 

        self.uiDialog = $('div.dialog'); 

        $('div.dialog') 
         .prepend('<div class="hd">'+ 
         '<div class="c"></div></div>') 
         .append('<div class="ft">'+ 
         '<div class="c"></div></div>') 
         .addClass(uiDialogClasses + options.dialogClass); 



       uiDialogContent = self.element 
        .show() 
        .removeAttr("title") 
        .addClass("ui-dialog-content ui-widget-content") 
        .appendTo(uiDialog), 

       uiDialogTitlebar = (self.uiDialogTitlebar = $("<div>")) 
        .addClass("ui-dialog-titlebar ui-widget-header " + 
         "ui-corner-all ui-helper-clearfix") 
        .prependTo(uiDialog), 

       uiDialogTitlebarClose = $("<a href='#'></a>") 
        .addClass("ui-dialog-titlebar-close ui-corner-all") 
        .attr("role", "button") 
        .click(function(event) { 
         event.preventDefault(); 
         self.close(event); 
        }) 
        .appendTo(uiDialogTitlebar), 

       uiDialogTitlebarCloseText = (self.uiDialogTitlebarCloseText = $("<span>")) 
        .addClass("ui-icon ui-icon-closethick") 
        .text(options.closeText) 
        .appendTo(uiDialogTitlebarClose), 

       uiDialogTitle = $("<span>") 
        .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 && $.fn.draggable) { 
       self._makeDraggable(); 
      } 
      if (options.resizable && $.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" && buttons !== null) { 
       $.each(buttons, function() { 
        return !(hasButtons = true); 
       }); 
      } 
      if (hasButtons) { 
       var uiDialogButtonPane = $("<div>") 
         .addClass("ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"), 
        uiButtonSet = $("<div>") 
         .addClass("ui-dialog-buttonset") 
         .appendTo(uiDialogButtonPane); 

       $.each(buttons, function(name, props) { 
        props = $.isFunction(props) ? 
         { click: props, text: name } : 
         props; 
        var button = $("<button type='button'>") 
         .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)); 

вот как я его использовать: и проблема, кажется, что $(this).dialog('close'); доза не вызывать близкую функцию у всех ....

var btns = {}; 
    btns[$.i18n.prop('buttons.ok')] = function() { 
     $(this).dialog('close'); 
    }; 

    var opt = options || {}; 

    if(opt.open==undefined) 
     opt.open = true; 

    $dialog = $('<div class="0m4r"></div>'); 
    $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; 
}; 

Спасибо!

Answer 1

Я думаю, ваша проблема в том, что вы ссылаетесь на неправильную переменную с помощью «этого».

btns[$.i18n.prop('buttons.ok')] = function() { 
    $(this).dialog('close'); 
}; 

$(this) селектора здесь является выбором кнопки из вашего массива кнопок, которые я не думаю, что вы пытаетесь достичь, как ваши кнопки не имеют диалога прилагается. Вам нужно обратиться к самому диалогу, чтобы закрыть его, что-то вроде этого.

$($dialog).dialog('close');