반투명 마스크 레이어 효과_자바스크립트 스킬이 포함된 팝업창

이 장에서는 버튼을 클릭하여 중앙 창을 팝업하는 방법을 소개하며, 이 창에는 반투명 마스크 레이어 효과가 있습니다. 물론 요즘에는 더 복잡한 구현 방법이 있으며 그 효과도 더 멋집니다. . , 아래에 소개된 코드는 이를 쉽게 구현할 수 있습니다.
코드는 다음과 같습니다.

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

://www.softwhy .com/" />

🎜>< script type="text/javascript">
window.onload=function(){
var linkbt=document.getElementById("linkbt")
var light=document.getElementById( '빛')
var fade=document.getElementById('fade');
var closebt=document.getElementById("closebt")
linkbt.onclick=function(){
빛 .style.display ='block';
fade.style.display='block';
}
closebt.onclick=function(){
light.style.display='none';
fade .style.display='none';
}
}

href="javascript :void(0)" id="linkbt"> 창을 열려면 여기를 클릭하세요

창 닫기

>


위 코드는 우리의 요구 사항을 충족합니다. 다음은 구현 프로세스에 대한 간략한 소개입니다.
1. 구현 원리:
기본 상태에서는 마스크 레이어와 창이 숨겨지고 보이지 않습니다. 링크를 클릭하면 창과 마스크 레이어가 표시되고 마스크 레이어가 절반으로 설정될 수 있습니다. 투명한 상태. 두 요소 모두 절대 위치 지정을 사용하고 중앙 창의 z-index 속성 값을 마스크 레이어보다 크게 설정하여 마스크 레이어를 덮을 수 있습니다. 닫기 버튼을 클릭하면 마스크 레이어와 창이 숨겨질 수 있습니다. 원리는 거의 동일합니다.