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