효과 : Windows 시스템을 사용하는 사용자가 종료되면 나타나는 인터페이스를 통해 사용자는 셧다운, 로그 아웃 또는 작업을 취소 할 수 있으며 데스크탑의 프로그램을 사용할 수없고 화면이 회색으로 표시됩니다. Windows 차단 효과는 그림 22.1에 나와 있습니다.
웹 페이지 에서이 효과를 사용하는 이점 : 웹 페이지 에서이 종료 효과를 사용하면 어떤 이점이 있습니까? 먼저, 링크를 클릭 한 후,이 시점에서 사용자가 사용할 수없는 작업은 백그라운드에 숨겨져 있으며 사용 가능한 작업이 화면 상단에 배치되어 강조 표시되어 사용자의 오해를 피할 수 있습니다. 둘째, 정보를 강조하면 사용자가주의를 기울여야 할 사항을 상기시킬 수 있습니다.
원리 : 웹 페이지 에서이 효과를 달성하는 원칙은 매우 간단합니다. 하나는 음영 레이어로 두 개의 레이어를 만들고 전체 페이지를 덮고 회색으로 표시합니다. 다른 층은 층의 Z-INDEX 속성을 설정하여 설정할 수있는 음영 레이어 위의 강조 표시된 부분으로 사용됩니다. 종료 효과가 취소되면 페이지 에서이 두 레이어 요소를 삭제하십시오.
암호:
<html>
<헤드>
<title> ajax 종료 효과 </title>
<styletype = text/css>
#lightbox {/*이 레이어는 하이라이트 레이어입니다*/
국경 오른쪽 :#ffff1pxsolid;
테두리 :#ffff1pxsolid;
디스플레이 : 블록;
z-index : 9999;/*이 레이어를 웹 페이지 상단에 설정하고 충분히 크게 설정*/
배경 :#fdfce9;/*배경색 설정*/
왼쪽 : 50%;
마진 : -220px0px0px-250px;
왼쪽 경계 :#ffff1pxsolid;
너비 : 500px;
국경-바닥 :#ffff1pxsolid;
위치 : 절대;
상단 : 50%;
높이 : 400px;
텍스트 정렬 : 왼쪽
}
#overlay {/*이 레이어는 커버 레이어*/
디스플레이 : 블록;
z- 인덱스 : 9998;/*하이라이트 레이어의 하단을 설정*/
필터 : 알파 (불투명도 = 20);/*투명하게 설정*/
왼쪽 : 0px;
너비 : 100%;
위치 : 절대;
상단 : 0px;
높이 : 100%;
배경색 :#000;
모즈-능력 : 0.8;
불투명도 : .80
}
</스타일>
</head>
<body>
<ahref = http : //www.baidu.comtarget=_blank> baidu </a>
<!-이 레이어는 커버 레이어입니다->
<divid = 오버레이> </div>
<!-이 레이어는 하이라이트 레이어입니다->
<divid = lightbox> <ahref =#onclick = javaScript : f ()> close </a> & nbsp; <ahref =#onclick = javaScript : f1 ()> Open </a> </div>
</body>
</html>
<cript>
functionf ()
{
document.getElementById (오버레이) .style.display = 없음;
}
functionf1 ()
{
document.getElementById (오버레이) .style.display = block;
}
</스크립트>
참고 : IE 브라우저에 <select> 태그가있는 경우 덮어 쓰기 레이어로 태그를 덮어 쓸 수는 없지만 다른 브라우저에서 덮어 쓰일 수 있습니다. 그림 22.3은 IE 브라우저에서 <select> 태그의 효과를 보여주고 그림 22.4는 Mozzilafirefox에서 <select> 태그의 효과를 보여줍니다.
그림 22.3 <Select> IE 브라우저의 태그
그림 22.4 Mozzilafirefox 브라우저의 <select> 태그
따라서 IE 브라우저를 사용할 때는 먼저 웹 페이지에서 <select> 요소를 숨겨야합니다. 예를 들어, 다음 코드를 사용하여 페이지의 모든 <select> 요소를 숨길 수 있습니다.
selects = document.getElementsByTagName ( 'select');
for (i = 0; i <selects.length; i ++) {
[i] .style.visibility = 가시성을 선택합니다.
}