이 기사에서는 JS+CSS에 의해 전체 화면 회색 블랙 투명 마스크 효과를 팝업하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
많은 웹 사이트에는 그러한 영향이 있습니다. 특정 작업을 수행하면 회색 블랙 반투명 마스크가 나타납니다. 지정된 컨텐츠는 로그인 상자 및 기타 내용과 같은 작동 할 수 있습니다. 이 효과를 달성하는 방법을 소개하겠습니다. 코드 예제는 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<meta name = "author"content = "// www.vevb.com/"/>
<title> 풀 스크린 그레이 블랙 투명 마스크 효과를 팝업하는 방법 -Wulin.com </title>
<스타일 유형 = "텍스트/CSS">
*
{
여백 : 0px;
패딩 : 0px;
}
.zhezhao
{
너비 : 100%;
높이 : 100%;
배경색 :#000;
필터 : 알파 (불투명도 = 50);
-Moz-opacity : 0.5;
불투명도 : 0.5;
위치 : 절대;
왼쪽 : 0px;
상단 : 0px;
디스플레이 : 없음;
Z- 인덱스 : 1000;
}
.로그인
{
너비 : 280px;
높이 : 180px;
위치 : 절대;
상단 : 200px;
왼쪽 : 50%;
배경색 :#000;
마진 왼쪽 : -140px;
디스플레이 : 없음;
Z- 인덱스 : 1500;
}
.콘텐츠
{
마진 탑 : 50px;
색상 : 빨간색;
라인 높이 : 200px;
높이 : 200px;
텍스트 정렬 : 센터;
}
</스타일>
<script type = "text/javaScript">
Window.onload = function ()
{
var zhezhao = document.getElementById ( "Zhezhao");
var login = document.getElementById ( "로그인");
var bt = document.getElementById ( "bt");
var btclose = document.getElementById ( "btclose");
bt.onclick = function ()
{
zhezhao.style.display = "block";
login.style.display = "block";
}
btclose.onclick = function ()
{
zhezhao.style.display = "none";
login.style.display = "none";
}
}
</스크립트>
</head>
<body>
<div id = "Zhezhao"> </div>
<div id = "login"> <button id = "btclose"> 닫으려면 클릭하십시오 </button> </div>
<div> wulin.com이 당신을 환영합니다
</body>
</html>
위는 기본 마스크 기능을 구현합니다. 마스크를 팝업하기 위해 클릭하면 물체가 나타납니다. 닫으려면 클릭하면 마스크 효과가 사라집니다. 효과를 달성하는 방법은 다음과 같습니다.
구현 원칙 :
절대 포지셔닝을 사용하여 전체 화면 DIV를 만들어 다른 요소에 영향을 미치지 않고 문서 스트림에서 분리 할 수 있도록하여 반투명 상태로 설정하십시오. 물론,이 투명성은 마음대로 조정 될 수 있으며 로그인 요소를 만들 수 있으며,이 요소는 절대 포지셔닝을 사용하고 화면의 DIV보다 Z-INDEX 속성 값을 크게 만듭니다. 기본 상태 에서이 두 DIV의 디스플레이 속성 값은 없음입니다. 해당 버튼을 클릭하면 디스플레이 속성 값을 변경할 수 있습니다.
제안 : 가능한 한 필기 코드는 학습 효율성과 깊이를 효과적으로 향상시킬 수 있습니다.
이 기사가 모든 사람의 웹 프로그래밍에 도움이되기를 바랍니다.