JS 페이지 팝업 작은 창, 반투명 점차 페이지 배경

<! 공용 DOCTYPE HTML "-//W3C//DTD XHTML 1.0 전환 / / 엉" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


< html xmlns = "http://www.w3.org/1999/xhtml" >


< 머리 >


< 메타 http-equiv = "콘텐츠 형식 콘텐츠 =" text/html; 문자셋 = utf-8 "/ >


< 제목 > 제목 문서 < / 타이틀 >


< 머리 >


< 제목 > 웹 페이지 팝업 작은 창, 페이지 배경 점차적으로 반투명 될 </타이틀 >
는

< 스타일 >


html, 본문 {글꼴-크기: 12px; 여백: 0px; 높이: 100%}


. Meswindow {국경: 1px #666 고체; 배경: #fff;}


. Meswindowtop {국경-하단: #eee 1px 고체; 여백-왼쪽: 4px; 패딩: 3px; 글꼴-무게: 굵게; 텍스트-정렬: 왼쪽; 글꼴-크기: 12px;


. meswindowcontent {여백: 4px; 글꼴-크기: 12px}


Meswindow 가까운 {높이: 15px; 너비: 28px; 테두리: 없음; 커서: 포인터; 텍스트-장식: 밑줄; 배경: # FFF}


< / 스타일 >


< 스크립트 >


var isie = (document.all)? 사실: 거짓;


//Set 선택
의 표시 상태

함수 Setselectstate (주)


{


var objl=document.getelementsbytagname ('선택');

대 한
(var i = 0; 난 < objl.length;i++)


{


[i] objl.style.visibility = 상태;


}


}


함수 mouseposition (EV)


{


경우 (Ev.pagex | ev.pagey)


{


반환 {x:ev.pagex, y:ev.pagey};


}


{
반환

X:ev.clientx + document.body.scrollleft document.body.clientleft,y:ev.clienty + document.body.scrollTop Document.body.clientTop


};


}


//Pop-up 메서드


함수 ShowMessageBox (wtitle, 콘텐츠, pos, wwidth)


{


CloseWindow ();


var bwidth = parseint (document.documentElement.scrollWidth);


var bheight = parseint (document.documentElement.scrollHeight);


경우 (Isie) {


setselectstate ('숨겨진');}


var back=document.createelement ("div");


back.id= "뒤로";


var stylestr = "가기: 0px; 왼쪽: 0px; 위치: 절대; 배경: #666, 폭:" + bwidth + "픽셀, 높이:" + bHeight + "PX;";


stylestr + = (Isie)? 필터: 알파 (불투명도 = 0); ":" 불투명도: 0; ";


Back.style.csstext=stylestr;


Document.body.appendChild (다시);


Showbackground (다시, 50);


var mesw=document.createelement ("div");


mesw.id= "Meswindow";


mesw.classname= "Meswindow";


Mesw.innerhtml= "< div 클래스 'meswindowtop' = >< 테이블 너비 = ' 100% ' 높이 ' 100% ' = >< tr >< td > ' + Wtitle + "< 신안 >< td 스타일 = ' 폭: 1px; >< 입력 유형 '버튼' onclick = 'CloseWindow ();' = 제목 = '창이 닫힙니다' 클래스 ' 종가 ' = = ' 종료 ' / >< 신안 >< /tr >< / 테이블 >< / div >< div 클래스 'meswindowcontent' id = 'meswindowcontent' = > '+ 콘텐츠 +' < / div > < div 클래스 'meswindowbottom' = >< / div > ';


stylestr = "왼쪽:" + ((pos.x-wwidth) > 0)? pos.x-wwidth): p os.x) + "Px; 최고: 50 픽셀; 위치: 절대; 너비:" + wwidth + "PX;";


Mesw.style.csstext=stylestr;


Document.body.appendChild (MESW);


}


//Let 배경 어둡게


기능 (obj, endint) Showbackground


{


경우 (Isie)


{


obj.filters.alpha.opacity + = 1;


경우 (obj.filters.alpha.opacity < endint)


{


settimeout (함수 () {showbackground (obj, endint)} 5);


}


}else{


var 알 parsefloat (obj.style.opacity), 알 + = 0.01; =


Obj.style.opacity=al;


경우 (알 < (endint/100))


{settimeout (함수 () {showbackground (obj, endint)} 5);


}


}


//Close 창


함수 CloseWindow ()


{


경우 (document.getElementById ('다시')! = null)


{


document.getElementById ('다시'). Parentnode.removechild (document.getElementById ('다시'));


}


경우 (document.getElementById ('Meswindow')! = null)


{


document.getElementById ('Meswindow'). Parentnode.removechild (document.getElementById ('MesWindow'));


}


경우 (Isie) {


setselectstate (');


}


//Test 팝업


함수 Testmessagebox (EV)


{


var objpos = mouseposition (EV);


messcontent = "< div 스타일 = ' 패딩: 20px 0 20px 0; 텍스트-정렬: 센터 ' > 본문 메시지 < / div >";


showmessagebox ('다음 영역 선택 하십시오', messcontent, objpos, 350);


}


< / 스크립트 >


< / 헤드 >


< 몸 >


< div 스타일 = "텍스트-정렬: 왼쪽" ><는 href = "#none" onclick = "Testmessagebox" (이벤트); > 팝업 창을 < /a >< / div >


< / 바디 >


< / html >