다음과 같이 코드 코드를 복사하십시오.
<html>
<헤드>
<title> 웹 특수 효과 창 특수 효과-팝업 창이 더 어두워지면 웹 배경의 효과 </title>
<meta http-equiv = "content-type"content = "text/html; charset = gb2312">
<!-<head>와 </head>-> 사이에 다음 코드를 추가하십시오.
<스타일 유형 = "텍스트/CSS">
. 불투명도 : .80; 알파 (불투명도 = 80);}
. 오버플로 : 자동;}
</스타일>
</head>
<body>
<!-다음 코드를 <body>와 </body>-> 사이에 추가하십시오.
<a href = "javaScript : void (0)"onclick = "document.getElementById ( 'light'). style.display = 'block'; .style.display = 'block'">
창을 열려면 여기를 클릭하십시오 </a>
<div id = "light">
<a href = "javaScript : void (0)"onclick = "document.getElementById ( 'light'). style.display = 'none'; tyle.display = 'none'">
가까이 </a>
<br> 창 콘텐츠
</div>
<div id = "페이드"> 123 </div>
</body>
</html>
Example 2:
다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<Head Runat = "Server">
<title> 비 -타이틀 페이지 </title>
<script language = "javaScript"type = "text/javaScript">
함수 hid ()
{{
var div4 = document.getElementById ( "div1");
div4.style.display = "블록";
div4.style.width = "200px";
div4.style.head = "150px";
div4.style.zindex = "9999";
div4.style.top = "43%";
div4.style.left = "43%";
div4.style.position = "절대";
var div3 = document.getElementById ( "div2");
div3.style.display = "block";
div3.style.width = "1000px";
div3.style.zindex = "9998";
div3.style.position = "절대";
div3.style.head = document.body.offsetheight;
div3.style.top = "0px";
div3.style.left = "0px";
}
기능 vis ()
{{
var div4 = document.getElementById ( "div1");
div4.style.display = "none";
var div3 = document.getElementById ( "div2");
div3.style.display = "none";
div3.style.width = "0px";
div3.style.head = "0px";
div4.innerhtml = "<a onclick = 'vis ()'style = 'style ='display : block 'id ='text '> 닫으려면 클릭 </a> <br /> <입력 이름 ='textbox2 'type ='text ' id = 'textbox2' /> <br /> <입력 id = 'button3'type = 'button'value = 'button'onclick = 'return button3_onclick () ";
}
</스크립트>
</head>
<body>
<div align = "center">
<table cellPadding = "0"CellSpacing = "0">
<!-dwlayouttable->
<tr>
<td> <form id = "form1"runat = "Server">
<a onclick = "hid ()"> 클릭하여 표시 </a> <br />
<div style = "색상 : 흰색; 배경색; 녹색; 디스플레이 : none;"
<a onclick = "vis ()"스타일 = "디스플레이 : 블록"id = "텍스트"> 닫으려면 클릭 </a> <br />
<br />
<asp : textbox id = "textbox2"runat = "server"> < /asp : textbox> <br />
<입력 id = "button3"type = "button"value = "button"onclick = "return button3_onclick ()" /> < /div>
<div style = "필터 : 알파 (불투명 = 70); 너비 : 1px; 높이 : 8px; 배경색 : #cccccc; 왼쪽 : 0px; put : 상단 : 0px; z-index : 9998; 디스플레이 : 없음;" id = "div2">
</div>
</form> </td>
</tr>
</테이블>
</div>
</body>
</html>
Example 3:
다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" /> />
<제목> 팝 -UP 레이어 효과 </title>을 클릭하십시오
<스타일>
* {마진 : 0;}
바디 {font-size : 12px;}
#container div {마진-탑 : 5px;}
#select_city h3 {float : 왼쪽;}
#main_city,#all_province {clear : 둘 다;}
#Main_City Div,#All_Province div {너비 : 600px;};
#main_city h4,#all_province h4 {left : inline;
#main_city div span,#all_provring div
#FLOAT {width : 120px;
</스타일>
<script type = "text/javaScript">
// 팝 레이어
함수 OpenLayer (objid, conid) {
var arraypagesize = getPagesize ();
var arraypagescroll = getPagesCroll ();
if (! document.getElementByid ( "popupaddr") {) {
// POP -UP 컨텐츠 레이어를 만듭니다
var pospdiv = document.createElement ( "div");
// 속성과 스타일을이 요소로 설정합니다
popupdiv.setattribute ( "id", "popupaddr")
popupdiv.style.position = "절대";
popupdiv.style.border = "1px solid #ccc";
popupdiv.style.background = "#fff";
popupdiv.style.zindex = 99;
// POP -UP 배경 레이어를 만듭니다
var bodyback = document.createElement ( "div");
bodyback.settattribute ( "id", "bodybg")
bodyback.style.position = "절대";
bodyback.style.width = "100%";
bodyback.style.head = (arraypagesize [1] + 35 + 'px');
bodyback.style.zindex = 98;
bodyback.style.top = 0;
bodyback.style.left = 0;
bodyback.style.filter = "alpha (불투명도 = 50)";
bodyback.style.opacity = 0.5;
bodyback.style.background = "#ddf";
// POP -UP 구현 (대상 요소 삽입 후)
var mybody = document.getElementById (objid);
insertaft (popupdiv, mybody); // 함수 insertAfter ()
insertAfter (bodyback, mybody); // insertAfter ()
}
// 배경 레이어를 표시합니다
getElementById ( "bodybg").
// 컨텐츠 계층을 표시합니다
var postobj = document.getElementById ( "popupaddr")
pos.innerhtml = document.getElementById (conf) .innerhtml;
pos.style.display = "";
// 페이지에서 팝업 레이어를 수직으로 왼쪽과 오른쪽으로 두십시오 (Unified)
// popobj.style.width = "600px";
// popobj. style.height = "400px";
// popobj. style.top = arraypagescroll [1] + (arraypagesize [3] -35-400) / 2 + 'px';
// popobj. style.left = (arraypagesize [0] -20-600) / 2 + 'px';
// 페이지에서 팝업 레이어를 수직으로 왼쪽과 오른쪽으로 두십시오 (성격)
var arrayconsize = getConsize (conf)
pos.style.top = arraypagescroll [1] + (ArrayPagesize [3] -ArrayConsize [1]) / 2-50 + 'px';
pos.style.left = (arraypagesize [0] -ArrayConsize [0]) / 2 -30 + 'px';
}
// 컨텐츠 계층의 원래 크기를 가져옵니다
함수 getConsize (conf) {
var conobj = document.getElementById (conf)
conobj.style.position = "절대";
conobj.style.left = -1000+ "px";
conobj.style.display = "";
var arrayconsize = [conobj.offsetWidth, conneable
conobj.. 스타일 display = "none";
반환 배열 크기;
}
함수 insertAfter (Newslement, TargetElement) {// 삽입
var parent = targetElement.parentNode;
if (parent.lastchild == targetElement) {
부모. AppendChild (뉴스);
}
또 다른 {
parent.insertbefore (뉴스, TargetElement.nextsibling);
}
}
// 롤링 바의 높이를 얻습니다
함수 getPagesCroll () {
var yscroll;
if (self.pageyoffset) {
yscroll = self.pageyoffset;
} else if (document.documentElement && documentlement.scroltop) {{{
yscroll = document.documentedlement.scrolltop;
} else if (document.body) {{
yscroll = document.body.scrolltop;
}
ArrayPagesCroll = New Array ( '', yscroll)
반환 ArrayPagesCroll;
}
// 페이지의 실제 크기를 가져옵니다
함수 getPagesize () {
var xscroll, yscroll;
if (window.innerheight && window.scrollmaxy) {{
xscroll = document.body.scrollwidth;
yscroll = window.innerHeight + Window.scrollMaxy;
} else if (document.body.scrollheight> document.body.offsetheight) {
sscroll = document.body.scrollwidth;
yscroll = document.body.scrollheight;
} 또 다른 {
xscroll = document.body.offsetwidth;
yscroll = document.body.offsetheight;
}
var Windowwidth, WindowHeight;
// var pageheight, pagewidth;
if (self.innerheight) {
windowwidth = self.innerwidth;
WindowHeight = self.innerHeight;
} else if (document.DocumentELement && document.documentlement.clientHeight) {
WindowWidth = document.documentElement.clientWidth;
WindowHeight = Document.DocumentELement.ClitingHeight;
} else if (document.body) {{
WindowWidth = document.body.clientWidth;
WindowHeight = Document.body.ClitingHeight;
}
var pagewidth, pageheight
if (yscroll <windowheight) {
PayHeight = WindowHeight;
} 또 다른 {
Payheight = yscroll;
}
if (xscroll <windowwidth) {
pagewidth = windowwidth;
} 또 다른 {
pagewidth = xscroll;
}
ArrayPagesize = New Array (PageWidth, PageHeight, Windowwidth, WindowHeight)
arraypagesize를 반환합니다.
}
// POP -UP 레이어를 닫습니다
함수 closelayer () {
getElementById ( "popupaddr") .display = "none";
getElementById ( "bodybg") .display = "none";
거짓을 반환합니다.
}
</스크립트>
</head>
<body>
<입력 이름 = "입력"id = "test"value = "스타일 설정"유형 = "버튼"onclick = "OpenLayer ( 'test', 'test_con')" />
<!-첫 번째 팝업 레이어 컨텐츠->
<div id = "test_con"style = "display : none">
<div id = "탭">
<div id = "tabtop">
<div id = "tabtop-l"> <strong> 스타일 설정 </strong> </div>
<div id = "tabtop-r"onclick = "closeLayer ()"> <strong> close </strong> </div>
</div>
<div id = "tabcontent"> 컨텐츠 표시 </div>
</div>
</div>
<br>
<br>
<br>
<입력 이름 = "입력"id = "test2"value = "스타일 프롬프트"유형 = "버튼"onclick = "OpenLayer ( 'test2', 'test_con2')" />
<!-두 번째 팝업 레이어 컨텐츠->
<div id = "test_con2"style = "display : none">
<div id = "tab2">
<div id = "tabtop2">
<div id = "tabtop-l2"> <strong style = "color : block"> Set Prompts </strong> </div>
<div id = "tabtop-r2"onclick = "closeLayer ()"> <strong style = "color : red"> close </strong> </div>
</div>
<div id = "tabconent2"style = "색상 : #dff; 배경 : #000">
<p> 여기에 프롬프트 콘텐츠 표시 "
<p> 팁 1
<p> 알림 2
</div>
</div>
</div>
<br>
1 <br>
<br>
<입력 이름 = "입력"id = "test3"value = "스타일 데모"유형 = "버튼"onclick = "OpenLayer ( 'test3', 'test_con3')" />
<!-세 번째 팝업 레이어 컨텐츠->
<div id = "test_con3"style = "display : none">
<div id = "tab3">
<div id = "tabtop3">
<div id = "tabtop-l3"> <strong style = "color : 빨간색; font-size : 20px"> 스타일 데모 </strong> </div>
<div id = "tabtop-r3"onclick = "closeLayer ()"> <strong> close </strong> </div>
</div>
<div id = "tabcontent3"> 여기에 디스플레이의 내용 </div>
</div>
</div>
</body>
</html>