js 및 css_javascript 기술을 사용하여 전체 페이지를 덮는 팝업 레이어를 구현하는 방법

이 글의 예시에서는 js와 css를 사용하여 전체 페이지를 덮는 팝업 레이어를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

배경이 투명한 팝업 레이어의 일반적인 스타일과 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

.alertMessageBg{
위치:고정;
_위치:절대;
너비:100%;
높이:100%;
왼쪽:0;
상단:0;
배경:#000;
불투명도:0.5;
-moz-불투명도:0.5;
필터:알파(불투명도=50);
Z-색인:97;
디스플레이:없음;
}
.alertMessageDivBorder{
위치:고정;
_위치:절대;
너비:750px;
높이:370px;
왼쪽:50%;
상단:50%;
여백:-185px 0 0 -375px;
배경:#000;
필터:알파(불투명도=30);
-moz-불투명도:0.3;
불투명도:0.3;
Z-색인:98;
디스플레이:없음;
}
.alertMessageDiv{
위치:고정;
_위치:절대;
너비:730px;
높이:350px;
왼쪽:50%;
상단:50%;
여백:-175px 0 0 -365px;
배경:#fff;
Z-색인:99;
디스플레이:없음;
글꼴 크기:14px;
}

팝업 레이어 배경으로 웹 페이지 전체를 덮는 방법

1.css 방식

코드 복사 코드는 다음과 같습니다.

.alertMessageBg{
위치:고정;
_위치:절대;
너비:100%;
높이:100%;
왼쪽:0;
상단:0;
배경:#000;
불투명도:0.5;
-moz-불투명도:0.5;
필터:알파(불투명도=50);
Z-색인:97;
디스플레이:없음;
}

2.js 방식

코드 복사 코드는 다음과 같습니다.

.alertMessageBg{
위치:절대;
너비:100%;
높이:100%;
왼쪽:0;
상단:0;
배경:#000;
불투명도:0.5;
-moz-불투명도:0.5;
필터:알파(불투명도=50);
Z-색인:97;
디스플레이:없음;
}

var bgWidth = document.body.clientWidth 'px',
bgHeight = document.body.clientHeight 'px',
AlertBgNode = $('.alertMessageBg');
AlertBgNode.css({'width':bgWidth,'height':bgHeight});

위의 두 가지 방법을 비교해 보면 CSS 방법이 더 문제가 없다는 것이 분명합니다. 특히 지금은 IE6과 호환되지 않습니다.

이 글이 JS 기반의 모든 웹 프로그래밍에 도움이 되기를 바랍니다.