POP -UP 레이어 효과를 클릭하십시오.

저자：Eve Cole 업데이트 시간：2025-03-01 03:32:01

다음과 같이 코드 코드를 복사하십시오.

<html>

<헤드>

<title> 웹 특수 효과 창 특수 효과-팝업 창이 더 어두워지면 웹 배경의 효과 </title>

<!-<head>와 </head>-> 사이에 다음 코드를 추가하십시오.

<스타일 유형 = "텍스트/CSS">

. 불투명도 : .80; 알파 (불투명도 = 80);}

. 오버플로 : 자동;}

</스타일>

</head>

<body>

<!-다음 코드를 <body>와 </body>-> 사이에 추가하십시오.

창을 열려면 여기를 클릭하십시오 </a>

가까이 </a>

<br> 창 콘텐츠

</div>

</body>

</html>

Example 2:

다음과 같이 코드 코드를 복사하십시오.

함수 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>

<!-dwlayouttable->

<tr>

<div style = "색상 : 흰색; 배경색; 녹색; 디스플레이 : none;"

<br />

<입력 id = "button3"type = "button"value = "button"onclick = "return button3_onclick ()" /> < /div>

</div>

</form> </td>

</tr>

</테이블>

</div>

</body>

</html>

Example 3:

다음과 같이 코드 코드를 복사하십시오.

<헤드>

<제목> 팝 -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;

</스타일>

// 팝 레이어

함수 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 = "tabtop-r"onclick = "closeLayer ()"> <strong> close </strong> </div>

</div>

</div>

<br>

<입력 이름 = "입력"id = "test2"value = "스타일 프롬프트"유형 = "버튼"onclick = "OpenLayer ( 'test2', 'test_con2')" />

<!-두 번째 팝업 레이어 컨텐츠->

<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>

<p> 여기에 프롬프트 콘텐츠 표시 "

<p> 팁 1

<p> 알림 2

</div>

<br>

1 <br>

<br>

<입력 이름 = "입력"id = "test3"value = "스타일 데모"유형 = "버튼"onclick = "OpenLayer ( 'test3', 'test_con3')" />

<!-세 번째 팝업 레이어 컨텐츠->

<div id = "tabtop-r3"onclick = "closeLayer ()"> <strong> close </strong> </div>

</div>

<div id = "tabcontent3"> 여기에 디스플레이의 내용 </div>

</div>

</body>

</html>