ModelDialog JavaScript 모달 대화 상자 클래스 code_javascript 기술

/**
* JavaScript ModelDialog v0.1
*
* new ModelDialog({
* 캡션 제목 '대화 상자 제목'(기본값)
* 템플릿 본문 내용''(기본값)
* DialogCls 대화 상자 클래스 이름 'md-dialog'(기본값)
* headCls 헤드 클래스 이름 'md-head'(기본값)
* btnCloseCls 닫기 버튼 className 'md-close'(기본값)
* bodyCls Body className ' md-body' (기본값)
* ShadowBg 커버 레이어 배경색 '회색' (기본값)
* ShadowOpy 커버 레이어 투명 0.2 (기본값)
* dragable 드래그 가능 여부 true (기본값)
* dragInWin 창 내에서만 드래그할지 여부(true)와 영역은 기본적으로 상호 배타적입니다.
* Area [minX, maxX, minY, maxY] 및 dragInWin은 상호 배타적입니다
*
*/

핵심 코드:

코드 복사 코드는 다음과 같습니다.

/**
* JavaScript ModelDialog v0.4
* 저작권(c) 2010 snandy
* 블로그: http://snandy.javaeye.com/
* QQ 그룹: 34580561
* 날짜: 2010 -09-08
*
*
* new ModelDialog({
* 캡션 제목 '대화 상자 제목'(기본값)
* 템플릿 본문 내용''(기본값)
*DialogCls 대화 상자 클래스 이름 'md-dialog'(기본값)
* headCls 헤드 클래스 이름 'md-head'(기본값)
* btnCloseCls 닫기 버튼 클래스 이름 'md-close'(기본값)
* bodyCls 본문 클래스 이름 'md -body'(기본값)
* ShadowBg 커버 레이어 배경색 '회색'(기본값)
* ShadowOpy 커버 레이어 투명 0.2(기본값)
* dragable 드래그 가능 여부 true(기본값)
* dragInWin 창 내에서만 드래그할지 여부(true)와 영역은 기본적으로 상호 배타적입니다.
* 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: 창['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);
반환 {w:w,h:h};
}
function $(tag){
return new $.prototype.init(tag);
}
$.prototype = {
init : function(tag){
this[0] = document.createElement(tag);
이것을 돌려주세요;
},
setCls : function(cls){
this[0].className = cls;
이것을 돌려주세요;
},
setSty : function(name,val){
name=='opacity' ?
IIE ?
this[0].style.filter = 'Alpha(Opacity=' val*100 ')' :
this[0].style.opacity = val :
this[0].style[name ] = 발;
이것을 돌려주세요;
},
css : function(str){
this[0].style.cssText = str;
이것을 돌려주세요;
},
html : function(str){
this[0].innerHTML = str;
이것을 돌려주세요;
}
}
$.prototype.init.prototype = $.prototype;

function ModelDialog(opt){
this.dialogCls = opt.dialogCls || 'md-대화상자';
this.headCls = opt.headCls || 'MD-헤드';
this.btnCloseCls = opt.btnCloseCls || 'MD-닫기';
this.bodyCls = opt.bodyCls || 'md-바디';
this.shadowBg = opt.shadowBg || '회색';
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=너비 패딩;offsetWidth=너비 패딩 테두리
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]
});
반환;
}
if(this.area){
this.dragdrop(this.dialog,{
bridge : this.head,
area : this.area
});
반환;
}
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
';높이:' getFullSize().h px
';배경:' 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;
},
드래그드롭: 함수(){
반환 함수(el,opt){
var _this=this, ele, diffX, diffY, dragX=true, dragY=true, minX, maxX , 최소Y, 최대Y, 브리지;
엘 = 엘;
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 = '절대';
다리?
this.on(bridge,'mousedown',mousedown) :
this.on(ele,'mousedown',mousedown);
function mousedown(e){
e = e || 창.이벤트;
ele.style.cursor = '포인터';
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 || 창.이벤트;
var moveX = e.clientX - diffX,
moveY = e.clientY - diffY;
moveX < minX && (moveX = minX); // 왼쪽 最小值
moveX > maxX && (moveX = maxX); // 왼쪽 最大值
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