我正在尝试使用下面的代码来扩展jQueryUI Dialog以达到这样的目的：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;
};
谢谢！
答案 0 :(得分：0)
我认为你的问题是你用“this”引用了错误的变量。
btns[$.i18n.prop('buttons.ok')] = function() {
$(this).dialog('close');
};
这里的$(this)选择器正在从您的按钮阵列中选择按钮，我不认为这是您要完成的按钮，因为您的按钮没有附加对话框。您需要引用对话框本身来关闭它，就像这样。
$($dialog).dialog('close');