js는 팝업 레이어 및 잠금 화면 효과 구현 code_javascript 기술을 작성합니다.

코드 복사 코드는 다음과 같습니다. 팝업 레이어 및 잠금 화면 효과 테스트 테스트

테스트

테스트 테스트

테스트

버튼" value=" 여기를 클릭하세요" onClick="sAlert('팝업 레이어 및 잠금 화면 효과 테스트');" /> function sAlert(str) { var msgw,msgh,bordercolor; msgw=400;//프롬프트 창 너비 msgh=100;/ /프롬프트 창 높이 titleheight=25 //프롬프트 창 제목 높이 bordercolor="#336699";//프롬프트 창 테두리 색상 titlecolor="#99CCFF";//제목 색상 프롬프트 창 var sWidth,sHeight; sWidth=document.body.offsetWidth;//창 너비 가져오기 sHeight=screen.height;//화면 높이 가져오기 var bgObj=document. createElement("div");/ /핵심은 여기에 있습니다. 원칙은 몸체에 div를 생성하고 너비와 높이를 폼 전체를 덮도록 설정하여 다른 창을 조작할 수 없도록 합니다 bgObj.setAttribute( 'id',' bgDiv'); bgObj.style.top="0" bgObj.style.Background="#777"; 🎜>bgObj.style .filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style. left="0" ; bgObj.style.width=sWidth "px"; bgObj.style.height=sHeight "px"; bgObj.style.zIndex = "10000"; document.body.appendChild (bgObj);//설정 후 이 div 표시 var msgObj=document.createElement('div');//메시지 창 만들기 msgObj.setAttribute("id"," msgDiv" ); msgObj.setAttribute("align","center"); msgObj.style.Background="white"; msgObj.style.border="1px solid " bordercolor; msgObj .style.position = "절대"; msgObj.style.left = "50%"; msgObj.style.top = "50%" msgObj.style.font="12px /1.6 em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgObj.style.marginLeft = "-225px" ; msgObj.style.marginTop = -75 document.documentElement.scrollTop "px"; msgObj.style.width = msgw "px"; msgObj.style.height = msgh "px"; msgObj.style.textAlign = "center" msgObj.style.lineHeight = "25px" "; msgObj.style.zIndex = "10001"; var title=document.createElement("h4"); //메시지 레이어 제목에 배치할 제목을 만듭니다. setAttribute(" id","msgTitle"); title.setAttribute("align","right") title.style.margin="0" title.style.padding=" 3px"; title.style.Background=bordercolor; title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20,finishX=100,finishY=100,style= 1,opacity =75,finishOpacity=100);"; title.style.opacity="0.75"; title.style.border="1px solid " bordercolor; title.style.height= "18px" ; title.style.font="12px 베르다나, 제네바, 헬베티카, 산세리프" title.style.color="white" title.style.cursor= "pointer" ; title.innerHTML="Close"; title.onclick=function() { document.body.removeChild(bgObj);//전체를 덮는 div 레이어를 제거합니다. window document.getElementById("msgDiv").removeChild(title);//제목 제거 document.body.removeChild(msgObj);//메시지 레이어 제거 } 문서. body.appendChild(msgObj); document.getElementById("msgDiv").appendChild(title); var txt=document.createElement("p") txt.style.margin="1em 0" txt.setAttribute("id","msgTxt"); txt.innerHTML=str; document.getElementById("msgDiv").appendChild(txt); }