Facebook Style jQuery popup window
by Chase Wilson
HTML
<a href="#open">Open Dialog</a>
CSS
html,body{height:100%; padding:0; margin:0;}
.dialog-wrapper {position:absolute; top:80px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 1.28; color: #333; z-index: 1000;}
.dialog-wrapper .dialog-background {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgb(82, 82, 82); opacity: 0.7; -moz-border-radius: 10px; border-radius: 8px;}
.dialog-wrapper .dialog-inner {position: absolute; top: 10px; left: 10px; bottom:10px; right:10px;}
.dialog-wrapper .dialog-inner .dialog-title {margin: 0; padding: 5px 10px; position:absolute;top:0;left:0px;right:0; background: #6D84B4; border: 1px solid #3B5998; border-bottom: none; }
.dialog-wrapper .dialog-inner .dialog-title h3 {margin:0;padding:0;font-size: 14px; font-weight: bold; color: #fff;}
.dialog-wrapper .dialog-inner .dialog-body {border: 1px solid #555; position: relative;background: #fff;}
.dialog-wrapper .dialog-inner .dialog-content {height: 100%;background:#fff;}
.dialog-wrapper .dialog-inner .dialog-footer {position:absolute;bottom: 0px; left:0; right:0;background: #f2f2f2; border-top:1px #e6e6e6 solid;}
.dialog-wrapper .dialog-inner .dialog-footer .action-links {list-style: none; margin: 0; padding: 8px 10px; text-align: right;}
.dialog-wrapper .dialog-inner .dialog-footer .action-links li {display: inline-block; margin: 0; padding: 0;}
.dialog-wrapper .dialog-inner .dialog-footer .action-links li a {display: block; padding: 0; margin-left: 4px; font-size: 13px; line-height: normal; vertical-align: top; font-weight: bold; text-decoration: none; border: 1px solid #999;}
.dialog-wrapper .dialog-footer .action-links li a span {padding: 2px 6px 4px; display: block; color: #333; text-shadow: 0px 1px 1px #fff; border-top: 1px #fff solid; background: #eee;}
.dialog-wrapper .inputbox, .dialog-wrapper textarea { padding: 3px; font-size: 11px; border: 1px solid #BDC7D8;}
.dialog-wrapper .dialog-footer .action-links li.blue a {border-color:...
JavaScript
(function(doc,win,j){
var extend = function(original){
var i = 1
,l = arguments.length
,key ,extend;
for (; i < l; i++){
extended = arguments[i] || {};
for (key in extended){
original[key] = extended[key];
}
}
return original;
};
var instances = {};
var Dialog = win.Dialog = function(options){
this.initialize(options)
};
Dialog.create = function(key, options){
return instances[key] = instances[key] || new Dialog(options);
};
Dialog.prototype = {
options: {
height: 100
,width: 100
,position:'center'
,modal: false
/*{height:int,text:string}*/
,title: null
,actions: null
,parent: doc.getElementsByTagName('body')[0]
,animate:{duration:500}
}
,initialize: function(options){
extend(this.options, options);
var self = this;
this.title = this.options.title;
this.setParent(this.options.parent);
this.createContainer();
var timer;
var reset = function(){
self.setPosition();
};
$(window).resize(function(){
clearTimeout(timer);
timer = setTimeout(reset,50);
});
}
,getPosition: function(){
if(this.options.position === 'center'){
var position = {};
$parent = j(this.getParent());
position.left = ($parent.width()/2) - (this.size.width/2);
position.top = (j(window).height()/2) - (this.size.height/2);
}
return position;
}
,setPosition:function(position){
position = position || this.getPosition();
this.$container.css(position);
}
,getParent: function(){
return (this.parent)?this.parent : this.setParent();
}
,setParent: function(parent){
this.parent = parent || this.options.parent;
return this.parent;
}
,setSize: function(size,transition){
...