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

://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 속성 값을 마스크 레이어보다 크게 설정하여 마스크 레이어를 덮을 수 있습니다. 닫기 버튼을 클릭하면 마스크 레이어와 창이 숨겨질 수 있습니다. 원리는 거의 동일합니다.