ModelDialog JavaScript模态对话框类代码_Javascript教程-查字典教程网

/**

* JavaScript ModelDialog v0.1

* new ModelDialog({

* caption 标题 '对话框标题'(默认)

* template 主体内容 ''(默认)

* dialogCls 对话框className 'md-dialog'(默认)

* headCls 头部className 'md-head'(默认)

* btnCloseCls 关闭按钮className 'md-close'(默认)

* bodyCls 主体className 'md-body'(默认)

* shadowBg 遮盖层背景色 'gray'(默认)

* shadowOpy 遮盖层透明的 0.2(默认)

* dragable 是否可拖拽 true(默认)

* dragInWin 是否仅在窗口内拖动 (true)默认与area互斥

* area [minX,maxX,minY,maxY] 与dragInWin互斥

* });

ModelDialog JavaScript模态对话框类代码1

核心代码：

复制代码代码如下:

/**

* JavaScript ModelDialog v0.4

* Blog: http://snandy.javaeye.com/

* QQ群: 34580561

* Date: 2010-09-08

* new ModelDialog({

* caption 标题 '对话框标题'(默认)

* template 主体内容 ''(默认)

* dialogCls 对话框className 'md-dialog'(默认)

* headCls 头部className 'md-head'(默认)

* btnCloseCls 关闭按钮className 'md-close'(默认)

* bodyCls 主体className 'md-body'(默认)

* shadowBg 遮盖层背景色 'gray'(默认)

* shadowOpy 遮盖层透明的 0.2(默认)

* dragable 是否可拖拽 true(默认)

* dragInWin 是否仅在窗口内拖动 (true)默认与area互斥

* area [minX,maxX,minY,maxY] 与dragInWin互斥

* });

ModelDialog =

function(){

var px = 'px';

var isIE = /msie/.test(navigator.userAgent.toLowerCase());

function getViewSize(){

return {w: window['innerWidth'] || document.documentElement.clientWidth,

h: window['innerHeight'] || document.documentElement.clientHeight}

}

function getFullSize(){

var w = Math.max(document.documentElement.clientWidth ,document.body.clientWidth) + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

var h = Math.max(document.documentElement.clientHeight,document.body.clientHeight) + Math.max(document.documentElement.scrollTop, document.body.scrollTop);

w = Math.max(document.documentElement.scrollWidth,w);

h = Math.max(document.documentElement.scrollHeight,h);

return {w:w,h:h};

}

function $(tag){

return new $.prototype.init(tag);

}

$.prototype = {

init : function(tag){

this[0] = document.createElement(tag);

return this;

setCls : function(cls){

this[0].className = cls;

return this;

setSty : function(name,val){

name=='opacity' ?

isIE ?

this[0].style.filter = 'Alpha(Opacity=' + val*100 + ')' :

this[0].style.opacity = val :

this[0].style[name] = val;

return this;

css : function(str){

this[0].style.cssText = str;

return this;

html : function(str){

this[0].innerHTML = str;

return this;

}

$.prototype.init.prototype = $.prototype;

function ModelDialog(opt){

this.dialogCls = opt.dialogCls || 'md-dialog';

this.headCls = opt.headCls || 'md-head';

this.btnCloseCls = opt.btnCloseCls || 'md-close';

this.bodyCls = opt.bodyCls || 'md-body';

this.shadowBg = opt.shadowBg || 'gray';

this.shadowOpy = opt.shadowOpy || '0.2';

this.caption = opt.caption || "对话框标题";

this.template = opt.template || '';

this.dragable = opt.dragable != false;

this.dragInWin = opt.dragInWin != false;

this.area = opt.area;

this.dialog = null;

this.head = null;

this.label = null;

this.btnClose = null;

this.body = null;

this.shadow = null;

this.init();

}

ModelDialog.prototype = {

init : function(){

var _this = this;

this.dialog = $('div').setCls(this.dialogCls).css('position:absolute;z-index:100;')[0];

this.head = $('div').setCls(this.headCls)[0];

this.label = $('label').html(this.caption)[0];

this.btnClose = $('div').setCls(this.btnCloseCls)[0];

this.on(this.btnClose,'click',function(){

_this.onClose();

});

this.head.appendChild(this.label);

this.head.appendChild(this.btnClose);

this.body = $('div').setCls(this.bodyCls)[0];

this.setContent(this.template);

this.dialog.appendChild(this.head);

this.dialog.appendChild(this.body);

this.createShadow();

document.body.appendChild(this.shadow);

document.body.appendChild(this.dialog);

this.moveToCenter();

// 计算拖拽范围

// 标准模式下：clientWidth=width+padding；offsetWidth=width+padding+border

if(this.dragable){

if(this.dragInWin){

var maxX = getViewSize().w - this.dialog.offsetWidth;

var maxY = getViewSize().h - this.dialog.offsetHeight;

this.dragdrop(this.dialog,{

bridge : this.head,

area : [0,maxX,0,maxY]

});

return;

}

if(this.area){

this.dragdrop(this.dialog,{

bridge : this.head,

area : this.area

});

return;

}

this.dragdrop(this.dialog,{

bridge : this.head

});

}

destroy : function(){

this.dialog = null;

this.head = null;

this.label = null;

this.btnClose = null;

this.body = null;

this.shadow = null;

createShadow : function(){

var str = 'position:absolute;left:0px;top:0px;z-index:1' +

';width:' + getFullSize().w + px +

';height:' + getFullSize().h + px +

';background:' + this.shadowBg +

';opacity:' + this.shadowOpy +

';filter:Alpha(Opacity=' + this.shadowOpy*100 + ');';

var _this = this;

this.shadow = $("div").setCls('md-shadow').css(str)[0];

this.on(window,'resize',function(){

_this.shadow.style.width = getFullSize().w + px;

_this.shadow.style.height = getFullSize().h + px;

_this.moveToCenter();

});

moveTo : function(x, y){

this.dialog.style.left = x + px;

this.dialog.style.top = y + px;

moveToCenter : function(){

var size = getViewSize();

var x = (size.w-50)/2 - (this.dialog.clientWidth-50)/2;

var y = (size.h- 50)/2 - (this.dialog.clientHeight-50)/2 + document.documentElement.scrollTop;

this.moveTo(x, y);

setCaption : function(v){

this.caption = v;

this.label.innerHTML = v;

setContent : function(str){

this.template = str;

this.body.innerHTML = str;

onClose : function(){

document.body.removeChild(this.dialog);

document.body.removeChild(this.shadow);

if(this['onbi']){

this.onbi();

}

this.destroy();

on : function(el, type, fn){

el.addEventListener ?

el.addEventListener(type, fn, false) :

el.attachEvent ?

el.attachEvent("on" + type, fn) :

el['on'+type] = fn;

un : function(el,type,fn){

el.removeEventListener ?

el.removeEventListener(type, fn, false) :

el.detachEvent ?

el.detachEvent("on" + type, fn) :

el['on'+type] = null;

dragdrop : function(){

return function(el,opt){

var _this=this, ele, diffX, diffY, dragX=true,dragY=true, minX, maxX, minY, maxY, bridge;

ele = el;

opt && opt.dragX===false && (dragX=false);

opt && opt.dragY===false && (dragY=false);

opt && opt.area && typeof opt.area[0]==='number' && (minX=opt.area[0]);

opt && opt.area && typeof opt.area[1]==='number' && (maxX=opt.area[1]);

opt && opt.area && typeof opt.area[2]==='number' && (minY=opt.area[2]);

opt && opt.area && typeof opt.area[3]==='number' && (maxY=opt.area[3]);

opt && opt.bridge && (bridge=opt.bridge);

ele.style.position = 'absolute';

bridge ?

this.on(bridge,'mousedown',mousedown) :

this.on(ele,'mousedown',mousedown);

function mousedown(e){

e = e || window.event;

ele.style.cursor = 'pointer';

if(ele.setCapture){//IE

_this.on(ele, "losecapture", mouseup);

ele.setCapture();

e.cancelBubble = true; //IE

}else if(window.captureEvents){//标准DOM

e.stopPropagation();

_this.on(window, "blur", mouseup);

e.preventDefault();

}

_x = e.clientX;

_y = e.clientY;

diffX = e.clientX - ele.offsetLeft;

diffY = e.clientY - ele.offsetTop;

_this.on(document,'mousemove',mousemove);

_this.on(document,'mouseup',mouseup);

}

function mousemove(e){

e = e || window.event;

var moveX = e.clientX - diffX,

moveY = e.clientY - diffY;

moveX < minX && (moveX = minX); // left 最小值

moveX > maxX && (moveX = maxX); // left 最大值

moveY < minY && (moveY = minY); // top 最小值

moveY > maxY && (moveY = maxY); // top 最大值

dragX && (ele.style.left = moveX + 'px');

dragY && (ele.style.top = moveY + 'px');

}

function mouseup(e){

ele.style.cursor = 'default';

_this.un(document,'mousemove',mousemove);

_this.un(document,'mouseup',mouseup);

if(ele.releaseCapture){//IE

_this.un(ele, "losecapture", mouseup);

ele.releaseCapture();

}

if(window.releaseEvents){//标准DOM

_this.un(window, "blur", mouseup);

}

}()

}

return ModelDialog;

}();

演示地址 http://demo.jb51.net/js/2011/ModelDialog/index.html

打包下载地址 http://www.jb51.net/jiaoben/35245.html