Custom JQuery dialog box
Custom JQuery dialog box
Hello!
I'm a web developer and in this period I'm using a lot JS.
I've created a custom JQuery object dialog and I want your oppinion about it....
I'm using IFRAME because on IE6 I've SELECT overlay bug
Thanks!
-
(function($) {
$.extend({
VlDialog: new function() {
function closeVlDialog(oDialog, oSeparator){
$(oDialog).remove();
$(oSeparator).remove();
delete oDialog;
delete oSeparator;
}
this.destroy = function(){
alert("dfdffd");
}
this.separator = "<div class=\"{cssSeparator}\" style=\"height:{separatorHeight}; width:{separatorWidth}\"><!--[if lte IE 6.5]><iframe src=\"about:blank\"></iframe><![endif]--></div>";
//this.separator = "<div class=\"{cssSeparator}\" style=\"height:{separatorHeight}; width:{separatorWidth}\"></div>";
this.template = "<div class=\"dialog\" style=\"{style}\">" +
"<div class=\"{cssHeader}\">" +
"<div class=\"{cssHeaderRight} {cssHeaderRightCursor}\"></div>" +
"<div class=\"{cssHeaderLeft}\"></div>" +
"<div class=\"{cssHeaderCenter}\">{headerTitle}</div>" +
"</div>" +
"<div class=\"{cssContent}\">{dialogBody}</div>" +
"</div>";
this.defaults = {
cssHeader: "handler font12",
cssHeaderLeft: "leftHandle",
cssHeaderCenter: "centerHandle fontWhite font12 bold arrow",
cssHeaderRight: 'closeButton',
cssHeaderRightCursor: 'pointer',
cssHeaderRightHover: 'closeButtonHover',
cssContent: "dialogContent backgroundGrey",
cssSeparator: 'whiteSeparator',
headerTitle: "Vlad's dialog box",
dialogBody: "contentHere",
height: "200px",
width: "50%",
debug: false,
separator: false,
separatorHeight: '100%',
separatorWidth: '100%'
};
this.construct = function(settings) {
var oDate = new Date();
var nStart = oDate.getTime();
var config = $.extend(config, $.VlDialog.defaults, settings);
var separator = $.VlDialog.separator;
var template = $.VlDialog.template;
var oSeparator = {};
var oDialog = $(template.supplant(config));
$('.' + config.cssHeaderRight, oDialog).click(function() {
closeVlDialog(oDialog, oSeparator);
});
if($.browser.msie){$('.' + config.cssHeaderRight, oDialog).hover(
function(){$(this).addClass(config.cssHeaderRightHover);},
function(){$(this).removeClass(config.cssHeaderRightHover);}
);}
if(config.separator){
if($.browser.msie){
config.separatorHeight = ($(document).height() - 4) + "px";
config.separatorWidth = ($(document).width() - 21) + "px";
}
$(window).resize(function(){
oSeparator.width($(window, document).width() + "px");
oSeparator.height($(window, document).height() + "px");
});
oSeparator = $(separator.supplant(config));
this.append(oSeparator);
}
this.append(oDialog);
$(oDialog).draggable({handle: ('.' + config.cssHeader.split(' ')[0])});
if(config.debug){
oDate = new Date();
alert("Dialog created in " + (oDate.getTime() - nStart) + "ms");
}
return;
};
}
});
$.fn.extend({VlDialog: $.VlDialog.construct});
})(jQuery);
Style is
-
.dialog{
position:absolute;
width:50%;
top:20%;
left:24%;}
.handler{height:15px}
.closeButton{
background-image:url(../images/body/dialog/close.gif);
background-color:#999999;
float:right;
width:42px;
height:15px;
background-position:left center;
background-repeat:no-repeat;
z-index:3}
.closeButton:hover{background-image:url(../images/body/dialog/close_over.gif);}
.closeButtonHover{background-image:url(../images/body/dialog/close_over.gif);}/*ONLY FOR IE*/
.leftHandle{background-image:url(../images/body/dialog/title_ne.gif); background-repeat:no-repeat; width:3px; height:15px; float:left; background-position:bottom left; z-index:2}
.centerHandle{background-image:url(../images/body/dialog/title_n.gif); text-align:center; background-repeat:repeat-x; overflow:hidden; background-position:left top; z-index:1}
.dialogContent{padding:2px; border:solid 1px #999999; border-top:none}
.whiteSeparator{width:100%; height:100%; position:absolute; top:0; left:0; background-color:#FFFFFF; filter:alpha(opacity=65); -moz-opacity:.65; opacity:.65;}
.whiteSeparator iframe{display:none; display/**/:block; position:absolute; top:0; left:0; z-index:-1; filter:mask(); width:3000px; height:3000px;}