JS 및 CSS 전체 페이지를 다루는 팝업 레이어 방법을 구현합니다.

이 기사에서는 JS 및 CSS에 의해 전체 페이지를 다루는 팝업 레이어를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.

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

코드 사본은 다음과 같습니다. .AlertMessageBg {

위치 : 고정;

_position : 절대;

너비 : 100%;

높이 : 100%;

왼쪽 : 0;

상단 : 0;

배경 :#000;

불투명도 : 0.5;

-Moz-opacity : 0.5;

필터 : 알파 (불투명도 = 50);

Z- 인덱스 : 97;

디스플레이 : 없음;

}

.AlertMessagedIvborder {

위치 : 고정;

_position : 절대;

너비 : 750px;

높이 : 370px;

왼쪽 : 50%;

상단 : 50%;

여백 : -185px 0 0 -375px;

배경 :#000;

필터 : 알파 (불투명도 = 30);

-Moz-opacity : 0.3;

불투명도 : 0.3;

Z- 인덱스 : 98;

디스플레이 : 없음;

}

.alertMessagediv {

위치 : 고정;

_position : 절대;

너비 : 730px;

높이 : 350px;

왼쪽 : 50%;

상단 : 50%;

마진 : -175px 0 0 -365px;

배경 : #fff;

Z- 인덱스 : 99;

디스플레이 : 없음;

글꼴 크기 : 14px;

}

<div> </div>

<div> </div>

<div> </div>

팝업 배경으로 전체 웹 페이지를 다루는 방법

1.CSS 방법

코드 사본은 다음과 같습니다. .AlertMessageBg {

위치 : 고정;

_position : 절대;

너비 : 100%;

높이 : 100%;

왼쪽 : 0;

상단 : 0;

배경 :#000;

불투명도 : 0.5;

-Moz-opacity : 0.5;

필터 : 알파 (불투명도 = 50);

Z- 인덱스 : 97;

디스플레이 : 없음;

}

2.JS 방법

코드 사본은 다음과 같습니다. .AlertMessageBg {

위치 : 절대;

너비 : 100%;

높이 : 100%;

왼쪽 : 0;

상단 : 0;

배경 :#000;

불투명도 : 0.5;

-Moz-opacity : 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 기반 웹 프로그래밍에 도움이되기를 바랍니다.