不需要任何javascript库，不需要额外加载css，兼容各浏览器，使用方便。
可以在初始化或者随时在show的时候设置选项：
是否模态显示
是否可以移动
是否黏着鼠标式的的移动，不用一直按着左键
设置窗口位置
设置窗口大小
是否居中显示
设置标题
设置内容，内容可以是html标签，可以是纯文本
设置关闭动作，是隐藏还是销毁
按照面象对象的方法写的，对这种写法感兴趣的朋友可以参考下
涉及到匿名方法，prototye，scope，闭包等，目前没有涉及继承。
how to use:
[] means optional
var win=new SimplePopup([options]);
win.show([options]);
your can pass these options to the construtor or the show method:
{
modal:true, //show as a modal window or not
canMove:true, //whether your window can be moved
glueMouse:true,//if set to true and canMove is true,you can move your window without keeping pressing the mouse
left:500, //position
top:300, //position
center:true,//whether to center your window in your explorer. If this option is set to true the left and top option will be ignored
width:400, //size
height:300, //size
title:'new title', //the title
content:'your content',//your content
closeAction:'hide' //'hide' means hide the window and 'close' means destroy the window. You can not show it again if you close a window
}
原版本见：http://www.sunchis.com/html/js/jssource/2010/0504/152.html
/**
* options can be:
* title
* width
* height
* top
* left
* center this option has a hight priority than top and left options
* content
* modal
* canMove
* glueMouse
* closeAction:'close' or 'hide'
* buttons [NA]
*/
function SimplePopup(options){
this._init(options);
};
(function(){
function applyStyles(el,obj){
for (name in obj){
el.style[name]=obj[name];
}
}
function isNumber(v){
return typeof v === 'number' && isFinite(v);
};
function apply(o, c, defaults){
if(defaults){
apply(o, defaults);
}
if(o && c && typeof c == 'object'){
for(var p in c){
o[p] = c[p];
}
}
return o;
};
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
};
function dele(method,scope, args, appendArgs){
return function() {
var callArgs = args || arguments;
if (appendArgs === true){
callArgs = Array.prototype.slice.call(arguments, 0);
callArgs = callArgs.concat(args);
}else if (isNumber(appendArgs)){
callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
var applyArgs = [appendArgs, 0].concat(args); // create method call params
Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
}
return method.apply(scope || window, callArgs);
};
};
apply(SimplePopup.prototype,{
_init:function(options){
/**
* create window markup:
*
* overlay(bgObj) div
*
*
*
*
*
*
*/
var opt=options||{};
this.options=opt;
if(opt.canMove===undefined)opt.canMove=true;
this._minWidth=20;
this._minHeight=10;
this._createMoveHandlers();
var w=opt.width||400,h=opt.height||300;
this.modal=opt.modal;
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var bgObj = document.createElement("div");
bgObj.style.width = iWidth+"px";
bgObj.style.height = Math.max(document.body.clientHeight, iHeight)+"px";
bgObj.style.display="none";
document.body.appendChild(bgObj);
this.overlay=bgObj;
var msgObj=document.createElement("div");
if(opt.center){
msgObj.style.top = (iHeight-h)/2+"px";
msgObj.style.left = (iWidth-w)/2+"px";
}else{
msgObj.style.top = (opt.top||"100")+"px";
msgObj.style.left = (opt.left||"100")+"px";
}
msgObj.style.width = w+"px";
msgObj.style.height = h+"px";
msgObj.style.display="none";
document.body.appendChild(msgObj);
this.panel=msgObj;
var table = document.createElement("table");
this.panel.appendChild(table);
var captiontr = table.insertRow(-1);
var titlecell = captiontr.insertCell(-1);
this.captionbar=titlecell;
this.setTitle(opt.title||"please set your title");
if(opt.canMove){
this.registerMove();
}
var closecell = captiontr.insertCell(-1);
closeBtn = document.createElement("span");
closeBtn.title="关闭";
closeBtn.innerHTML="×"
closecell.appendChild(closeBtn);
if(opt.closeAction=="hide"){
this.options.closeAction="hide";
closeBtn.onclick = dele(this.hide,this);
}else{
closeBtn.onclick = dele(this.close,this);
this.options.closeAction="close";
}
this.closeButton=closeBtn;
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.textAlign="left";
msgBox.colSpan = "2";
var contentdiv = document.createElement("div");
contentdiv.style.overflow='auto';
msgBox.appendChild(contentdiv);
this.contentPanel=contentdiv;
this.onresize();
this.setContent(opt.content||"please set your content");
applyStyles(bgObj,{
"position":"absolute",
"top":"0px",
"right":"0px",
"bottom":"0px",
"left":"0px",
"backgroundColor":"#000000",
"filter":"alpha(opacity=20)",
"opacity":"0.2",
"zIndex":"100"
});
applyStyles(msgObj,{
"border":"#D6D3D6 2px solid",
"backgroundColor":"#FBF1F7",
"position":"absolute",
"textAlign":"center",
"padding":"0px 0px 0px 0px",
"lineHeight":"22px",
"zIndex":"102"
});
applyStyles(table,{
"width":"100%",
"margin":"0px",
"border":"0px",
"padding":"0px",
"borderSpacing":"0px",
"borderCollapse":"collapse"
});
captiontr.style.background="#56DAD3";
applyStyles(titlecell,{
"height":"20px",
"color":"#250000",
"textAlign":"left",
"padding":"3px 3px 3px 1px",
"margin":"0px",
"fontWeight":"bold",
"fontSize":"13px",
"cursor":"move"
});
applyStyles(closecell,{
"width":"5px",
"textAlign":"right",
"padding":"0px",
"paddingRight":"3px",
"cursor":"move",
"margin":"0px"
});
applyStyles(closeBtn,{
"color":"#ffffff",
"fontSize":"15pt",
"cursor":"pointer"
});
},
_createMoveHandlers:function(){
var moveData = {
startX : 0,
startY : 0,
startTop : 0,
startLeft : 0,
moving : false,
mousedown:0,
docMouseMoveHandler : document.onmousemove,
docMouseUpHandler : document.onmouseup,
me:this
};
this.onCaptionMousedown=function() {
var e = getEvent();
moveData.startX = e.clientX;
moveData.startY = e.clientY;
moveData.startTop = parseInt(moveData.me.panel.style.top);
moveData.startLeft = parseInt(moveData.me.panel.style.left);
if (moveData.me.options.glueMouse){
if(moveData.mousedown==0){
moveData.moving=true;
document.onmousemove =moveData.me.onDocMousemove;
moveData.mousedown=1;
}else{
document.onmousemove = moveData.docMouseMoveHandler;
moveData.moving = false;
moveData.mousedown=0;
}
}else{
moveData.moving = true;
document.onmousemove =moveData.me.onDocMousemove;
document.onmouseup = moveData.me.onDocMouseup;
}
};
this.onDocMousemove=function() {
if (moveData.moving) {
var e = getEvent();
var deltaX = moveData.startLeft + e.clientX - moveData.startX;
var deltaY = moveData.startTop + e.clientY - moveData.startY;
if ( deltaX > 0 &&( deltaX +2+ moveData.me.getWidth() < document.documentElement.clientWidth) &&
deltaY > 0 && (deltaY +2+ moveData.me.getHeight() < document.documentElement.clientHeight) ) {
moveData.me.panel.style.left = deltaX + "px";
moveData.me.panel.style.top = deltaY + "px";
}
}
};
this.onDocMouseup=function () {
if (moveData.moving) {
document.onmousemove = moveData.docMouseMoveHandler;
document.onmouseup = moveData.docMouseUpHandler;
moveData.moving = false;
}
};
},
registerMove:function(){
try{
if(!this._movehandlerregistered){
this.captionbar.onmousedown = this.onCaptionMousedown;
this._movehandlerregistered=true;
}}catch(err){alert(err)}
},
unRegisterMove:function(){
if(this._movehandlerregistered){
this.captionbar.onmousedown = undefined;
this._movehandlerregistered=false;
}
},
show:function(options){
this._hideSelectTags();
if(options){
if(options.title)this.setTitle(options.title);
if(options.content)this.setContent(options.content);
if(isNumber(options.width))this.setWidth(options.width);
if(isNumber(options.height))this.setHeight(options.height);
if(options.center){
this.center();
}else{
if(isNumber(options.top))this.setTop(options.top);
if(isNumber(options.left))this.setLeft(options.left);
}
if(options.canMove!==undefined){
if(options.canMove){
this.registerMove();
}else{
this.unRegisterMove();
}
}
if(options.closeAction&&options.closeAction!=this.options.closeAction){
if(options.closeAction=="hide"){
this.closeButton.onclick = dele(this.hide,this);
}else{
this.closeButton.onclick = dele(this.close,this);
}
this.options.closeAction=options.closeAction;
}
if(options.glueMouse!==undefined){
this.options.glueMouse=options.glueMouse;
}
}
var o=options||{};
var modal=(o.modal===undefined?this.modal:o.modal);
if (modal){
this.overlay.style.display="";
}else{
this.overlay.style.display="none";
}
this.panel.style.display="";
},
hide:function(){
this._showSelectTags();
this.overlay.style.display="none";
this.panel.style.display="none";
},
close:function(){
this._showSelectTags();
document.body.removeChild(this.overlay);
document.body.removeChild(this.panel);
},
_hideSelectTags:function(){
var sl = document.getElementsByTagName("select");
this._selects=sl;
for(var j=0;j=this._minWidth){
this.panel.style.width=val+"px";
this.onresize();
}
},
getWidth:function(){
return parseInt(this.panel.style.width);
},
setHeight:function(val){
if(val>=this._minHeight){
this.panel.style.height=val+"px";
this.onresize();
}
},
getHeight:function(){
return parseInt(this.panel.style.height);
},
setTop:function(val){
if(val>=0&&val+10<= document.documentElement.clientHeight){
this.panel.style.top=val+"px";
}
},
getTop:function(){
return parseInt(this.panel.style.top);
},
setLeft:function(val){
if(val>=0&&val+10<=document.documentElement.clientWidth){
this.panel.style.left=val+"px";
}
},
getLeft:function(){
return parseInt(this.panel.style.left);
},
center:function(){
this.panel.style.top = (document.documentElement.clientHeight-this.getHeight())/2+"px";
this.panel.style.left = (document.documentElement.clientWidth-this.getWidth())/2+"px";
},
onresize:function(){
this.contentPanel.style.width=(this.getWidth()-1)+"px";
this.contentPanel.style.height=(this.getHeight()-29)+"px";
}
});
})()