javascript div는 드래그 가능한 window_javascript 기술을 표시합니다.

/*
* 팝업 div 창을 만듭니다.
1. 인터페이스 설명: DivWindow(id,title,width,height,content) 생성자, 팝업 창 개체 생성
매개변수: id 팝업 창 id
title: 팝업 창 제목 이름
width: 팝업 창 너비
height: 팝업 창 높이
content: 팝업 창 표시 내용

인터페이스 설명: closeDivWindow(id)가 닫힙니다. the window
매개변수: id 팝업창 id

3. 인터페이스 설명: setPopupTopTitleFontColor(PopupTopTitleFontColor) 팝업창 제목 글꼴 색상 설정
매개변수:

4. 인터페이스 설명: setPopupTopBgColor(tBgColor) 팝업 창 제목 배경색 설정

5. 인터페이스 설명: setPopupColor(borderColor,bgColor,tFontColor,cBgColor,fColor) 배경을 포함한 팝업 창 스타일을 설정합니다. 제목 표시줄, 팝업 창 테두리 색상, 콘텐츠 양식 배경색, 콘텐츠 양식 글꼴 색상

6. 인터페이스 설명: open()

사용법:
var a = new DivWindow("1","창 테스트",580,400,"내 개인 웹사이트에 오신 것을 환영합니다:
http://www.qqview.com


thx!!!=)... "L);
a.setPopupTopBgColor("black","blue","white" ,"white","black");
a.open();

생성된 html :

배경 div를 제어하여 배경을 점차 어둡게 합니다.

제목
maxORmin
닫기

내용

@author Nieger Dai
@date 2007.11.15
*/

var isIe = (document.all)?true:false
var moveable=false;
var topDivBorderColor = "#336699";//프롬프트 창의 테두리 색상
var topDivBgColor = "#6795B4";//프롬프트 창 제목의 배경색
var contentBgColor = " white";// 콘텐츠 표시창 배경색
var contentFontColor = "black";//콘텐츠 표시창 글꼴 색상
var titleFontColor = "white"; //팝업창 제목 글꼴 색상
var index=10000;// z-index;
//팝업 창 생성, 생성자
function DivWindow(id,title,w,h,content)
{
this.id = id;//Window id
this.zIndex = index 2;
this.title = title;//팝업 창 이름
this.message = content;//팝업 창 내용
this.width = w;//팝업 창 너비
this.height = h;//팝업 창 높이
this.left = (document.body.clientWidth) ? document.body.clientWidth - this.width)/2 : 0;//팝업 창 위치, 화면 왼쪽에서의 위치
this.top = (document.body.clientHeight) ? body.clientHeight - this.height)/2 : 0;//팝업창 위치, 화면 상단에서의 위치
//this.init = init
//this.init; ();
}
//생성자에 따라 초기값을 설정하고 팝업창을 생성합니다
DivWindow.prototype = {
//팝업창 제목 글꼴 색상을 설정합니다
setPopupTopTitleFontColor:function(tFontColor)
{
titleFontColor = tFontColor;
},
//팝업 창 제목 배경색 설정
setPopupTopBgColor: function(tBgColor)
{
topDivBgColor = tBgColor;
},
//제목 표시줄 배경, 팝업 창 테두리 색상, 콘텐츠 양식 배경색, 콘텐츠 양식 글꼴 색상을 포함한 팝업 창 스타일을 설정합니다.
setPopupColor:function(borderColor,bgColor,cBgColor,fColor)
{
topDivBorderColor = borderColor;
topDivBgColor = bgColor;
contentBgColor = cBgCol 또는 ; contentFontColor =
},
//팝업 창 열기
open: function()
{
var sWidth,sHeight
sWidth=document.body .clientWidth; ;
sHeight=document.body.clientHeight;
var bgObj=document.createElement("div")
bgObj.setAttribute('id','window' this.id); styleStr="top:0px;left:0px;position:absolute; background:#245;width:" sWidth "px;height:" sHeight "px;"
styleStr =(isIe)?"filter: alpha( opacity=0);":"opacity:0;";
bgObj.style.cssText=styleStr;
document.body.appendChild(bgObj);
//배경이 점차 어두워지도록 합니다
showBackground(bgObj,25);

// 팝업 창 프레임 배경 컨테이너
var windowTopBgDiv = document.createElement("div")
windowTopBgDiv.setAttribute('id',' windowTopBg ' this.id);
windowTopBgDiv.style.position = "absolute";
windowTopBgDiv.style.zIndex = this.zIndex;
windowTopBgDiv.style.width =
windowTopBgDiv; style.height = this.height;
windowTopBgDiv.style.left = this.left;
windowTopBgDiv.style.top = this.top;
windowTopBgDiv.style.Background =
windowTopBgDiv; style.fontSize = "9pt";
windowTopBgDiv.style.cursor = "default";
windowTopBgDiv.style.border = "1px solid " topDivBorderColor;
windowTopBgDiv.attachEvent("onmousedown",function( ) {
if(windowTopBgDiv.style.zIndex!=index)
{
index = 인덱스 2;
var idx = index
windowTopBgDiv.style.zIndex=idx;
});
// 팝업 창 헤더 프레임
var windowTopDiv = document.createElement("div")
windowTopDiv.setAttribute('id','windowTop' this.id ) ;
windowTopDiv.style.position = "absolute";
windowTopDivBgColor;//"white";
windowTopDiv.style.color =
windowTopDiv.style; = "이동";
windowTopDiv.style.height = 20;
windowTopDiv.style.width = this.width-2*2
//드래그 시작
onmousedown ",function(){
if(event.button==1)
{
//제목 표시줄 잠금;
windowTopDiv.setCapture();
//정의 객체;
var win = windowTopDiv.parentNode;//마우스 및 레이어 위치 기록;
x0 = event.clientX;
y0 = event.clientY;
x1 = parsInt(win.style.left );
y1 = parInt(win.style.top);
//색상 기록
//topDivBgColor = windowTopDiv.style.BackgroundColor; windowTopDiv.style.groundColor = topDivBorderColor;
moveable = true;
}
})
windowTopDiv. "onmouseup",function(){
if(이동 가능)
{
var win = windowTopDiv.parentNode;
win.style.borderColor = topDivBgColor
windowTopDivBgColor; ;
windowTopDiv.releaseCapture();
moveable = false;
}
})
// 드래그 시작
windowTopDiv.attachEvent("onmousemove",function( ) 🎜>if(이동 가능)
{
var win = windowTopDiv.parentNode;
win.style.left = x1 event.clientX - x0;
win.style.top = y1 event .clientY - y0
}
}; 팝업 창 제목 표시
var windowTopTitleSpan = document.createElement("span");
windowTopTitleSpan.setAttribute('id','windowTopTitle' this.id)
windowTopTitleSpan.style. width = this .width-2*12-4;
windowTopTitleSpan.style.paddingLeft = "3px";
windowTopTitleSpan.innerHTML = this.title;

//팝업 창 추가 작업 최소화 및 최대화
var windowTopOperateSpan = document.createElement("span");
windowTopOperateSpan.setAttribute('id','windowTopOperate' this.id)
windowTopOperateSpan.style.width = 12;
windowTopOperateSpan.style.borderWidth = "0px";
windowTopOperateSpan.style.color = titleFontColor;//"white";
windowTopOperateSpan.style.fontFamily = "webdings"
windowTopOperateSpan.style. cursor = " default";
windowTopOperateSpan.innerHTML = "0";
//팝업 창 작업 최대화 또는 최소화
windowTopOperateSpan.attachEvent("onclick",function(){
maxOrMinPopupDiv (windowTopOperateSpan,windowContentDiv )
});

//팝업 창 닫기 작업 추가
var windowTopCloseSpan = document.createElement("span")
windowTopCloseSpan.setAttribute( 'id',' windowTopClose' this.id)
windowTopCloseSpan.style.width = 12;
windowTopCloseSpan.style.borderWidth = "0px";
windowTopCloseSpan.style.color = titleFontColor;//" white";
windowTopCloseSpan.style.fontFamily = "webdings";
windowTopCloseSpan.style.cursor = "default";
windowTopCloseSpan.innerHTML = "r";
// 창 닫기
windowTopCloseSpan.attachEvent(" onclick",function(){
windowTopDiv.removeChild(windowTopTitleSpan);
windowTopDiv.removeChild(windowTopOperateSpan);
windowTopDiv.removeChild(windowTopCloseSpan);
windowTopBgDiv.removeChild( windowTopDiv );
windowTopBgDiv.removeChild(windowContentDiv);
document.body.removeChild(windowTopBgDiv);
document.body.removeChild(bgObj)

/ / content
var windowContentDiv = document.createElement("div");
windowContentDiv.setAttribute('id','windowContent' this.id)
windowContentDiv.style.Background
windowContentDiv.style.color = contentFontColor;
windowContentDiv.style.cursor = "기본값";
windowContentDiv.style.height = (this.height - 20 - 4)
windowContentDiv.style.width = " 100%";
windowContentDiv.style.position = "relative";
windowContentDiv.style.left = 0;
windowContentDiv.style.top = 24;

windowContentDiv.style.lineHeight = "20px";
windowContentDiv.style.fontSize = "10pt";
windowContentDiv.style.wordBreak = "break-all";
windowContentDiv.style.padding = "3px"; .innerHTML = this.message ;

//파일에 내용 쓰기
windowTopDiv.appendChild(windowTopTitleSpan)
windowTopDiv.appendChild(windowTopOperateSpan)
windowTopDiv.appendChild(windowTopCloseSpan) ;
windowTopBgDiv .appendChild(windowTopDiv);
windowTopBgDiv.appendChild(windowContentDiv);
document.body.appendChild(windowTopBgDiv); Window
function maxOrMinPopupDiv(windowTopOperateSpan,windowContentDiv)
🎜 >var win = windowTopOperateSpan.parentNode.parentNode;
var tit = windowTopOperateSpan.parentNode;
var flg = windowContentDiv.style.display== "none"
if(flg)
>win.style.height =parseInt(windowContentDiv.style.height)parseInt(tit.style.height) 2*2;
windowContentDiv.style .display = "block"
windowTopOperateSpan.innerHTML = "0" ;
}
else
{
win.style.height = parsInt(tit.style.height) 2*2 ;
windowTopOperateSpan.innerHTML = "2"; style.display = "none";
}
}
//배경을 점차 어둡게 합니다
function showBackground(obj ,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity =1;
if(obj.filters.alpha.opacity{
setTimeout(function(){this.showBackground(obj,endInt) },5);
}
}
else
{
var al=parseFloat(obj.style.opacity);al =0.01;
obj.style.opacity=al ;
if(al{
setTimeout(function(){this.showBackground(obj, endInt)},5)
}
}
}
//关闭弹출구구
function closeDivWindow(id)
{
var windowTopTitleSpan = document.getElementById("windowTopTitle" id);
var windowTopOperateSpan = document.getElementById("windowTopOperate" id);
var windowTopCloseSpan = document.getElementById("windowTopClose" id);
var windowTopDiv = document.getElementById("windowTop" id);
var windowTopBgDiv = document.getElementById("windowTopBg" id);
var windowContentDiv = document.getElementById("windowContent" id);
var bgObj = document.getElementById("window" id);

windowTopDiv.removeChild(windowTopTitleSpan);
windowTopDiv.removeChild(windowTopOperateSpan);
windowTopDiv.removeChild(windowTopCloseSpan);
windowTopBgDiv.removeChild(windowTopDiv);
windowTopBgDiv.removeChild(windowContentDiv);
document.body.removeChild(windowTopBgDiv);
document.body.removeChild(bgObj);
}