코드 복사 코드는 다음과 같습니다. < ;title>웹페이지 특수효과-창 특수효과-팝업창 후 웹페이지 배경을 어둡게 하는 효과<br>.black_overlay {display:none;position:absolute;top:0%;left:0%;width:100%;height:100%; background-color:black;z-index:1001; -moz-opacity:0.8;불투명도: .80;filter:alpha(opacity=80);}<br>.white_content{display:none;position:absolute;top:25%;left:25%;width:50% ;높이:50%;패딩:16px ;테두리:3px 단색 주황색;배경색:흰색;z-색인:1002;오버플로우:자동;}<br> 창을 열려면 여기를 클릭하세요닫기창 콘텐츠123 예시 2: 코드 복사 코드는 다음과 같습니다. 无标题页 <br> function hid()<br> {<br> var div4=document.getElementById("div1") ;<br> div4.style.display="block";<br> div4.style.width="200px";<br> div4.style.height="150px";<br> div4.style.zIndex=" 9999";<br> div4.style.top="43%";<br> div4.style.left="43%";<br> div4.style.position="absolute";<br> var div3= document.getElementById("div2");<br> div3.style.display="block";<br> div3.style.width="1000px";<br> div3.style.zIndex="9998";<br> div3.style.position="absolute";<br> div3.style.height=document.body.offsetHeight;<br> div3.style.top="0px";<br> div3.style.left="0px ";<br> }<br> 함수 vis()<br> {<br> var div4=document.getElementById("div1");<br> div4.style.display="none";<br> var div3 =document.getElementById("div2");<br> div3.style.display="none";<br> div3.style.width="0px";<br> div3.style.height="0px";<br> div4.innerHTML="<a onclick='vis()' style='display: block' id='text'>点击关闭</a><br /><br /> <input name='TextBox2' type='text' id='TextBox2' /><br /><input id='Button3' type='button' value='button' onclick='return Button3_onclick ()' />";<br> }<br> 点击显示 点击关闭 <입력 id="Button3" type="button" value="button" onclick="return Button3_onclick()" /> 예시 3: 코드 복사 코드는 다음과 같습니다. 点击弹 Out层效果 <br> * {margin:0;}<br> body {font-size:12px;}<br> #container div{margin-top:5px;}<br> #select_city h3{float:left;}<br> #main_city,#all_province {clear:both;}<br> #main_city div,#all_province div{width:600px;clear:left;}<br> #main_city h4,#all_province h4{float:left;display:inline;font-size:16px;}<br> #main_city div 범위,#all_province div 범위{margin:0 10px;cursor:pointer;font-size:12px;}<br> #float_lay{width:200px;height:120px;border:1px #d1d1d1 solid;position:absolute; background: #fff;z-index:999;display:none;}<br> <br> //弹出层<br> function openLayer( objId,conId){<br> var arrayPageSize = getPageSize();//调用getPageSize()函数<br> var arrayPageScroll = getPageScroll();//调用getPageScroll()函数<br> if (!document.getElementById (" popupAddr")){<br><br> //创建弹内容层<br> var popupDiv = document.createElement("div");<br><br> //给这个元素设置属性与样式<br> popupDiv.setAttribute("id","popupAddr")<br> popupDiv.style.position = "absolute";<br> popupDiv.style.border = "1px solid #ccc";<br> popupDiv.style.Background = "#fff";<br> popupDiv.style.zIndex = 99;<br><br> <br> //创建弹出背景层<br> var bodyBack = document.createElement("div");<br> 몸뒤로 .setAttribute("id","bodybg")<br> bodyBack.style.position = "absolute";<br> bodyBack.style.width = "100%";<br> bodyBack.style.height = (arrayPageSize[ 1] 35 'px');<br> bodyBack.style.zIndex = 98;<br> bodyBack.style.top = 0;<br> bodyBack.style.left = 0;<br><br> bodyBack.style .filter = "alpha(opacity=50)";<br> bodyBack.style.opacity = 0.5;<br> bodyBack.style.Background = "#ddf";<br><br> //实现弹出(插入到目标元素之后)<br> var mybody = document.getElementById(objId);<br> insertAfter(popupDiv,mybody);//执行函数insertAfter()<br> insertAfter(bodyBack,mybody);//执行函삽입후( )<br><br> }<br><br> //배경 레이어 표시<br> document.getElementById("bodybg").style.display = "";<br> //콘텐츠 레이어 표시<br> var popObj=document.getElementById( "popupAddr ")<br> popObj.innerHTML = document.getElementById(conId).innerHTML;<br> popObj.style.display = "";<br> // 팝업 레이어를 페이지에서 수직으로 왼쪽과 오른쪽 가운데에 배치합니다(통합) )<br> // popObj.style.width = "600px";<br> // popObj.style.height = "400px";<br> // popObj.style.top = arrayPageScroll[1] (arrayPageSize[3 ] - 35 - 400) / 2 'px';<br> // popObj.style.left = (arrayPageSize[0] - 20 - 600) / 2 'px';<br> // 팝업 레이어를 중앙에 배치 페이지의 수직 왼쪽 및 오른쪽( 성격)<br> var arrayConSize=getConSize(conId)<br> popObj.style.top = arrayPageScroll[1] (arrayPageSize[3] - arrayConSize[1]) / 2-50'px ';<br> popObj.style .left = (arrayPageSize[0] - arrayConSize[0]) / 2 -30 'px';<br> }<br> } //콘텐츠 레이어의 원래 크기를 가져옵니다 <br> function getConSize(conId){<br> var conObj=document.getElementById(conId)<br> conObj.style.position = "absolute";<br> conObj.style.left=-1000 "px";<br> conObj.style.display="";<br> var arrayConSize=[conObj.offsetWidth,conObj.offsetHeight]<br> conObj.style.display="none";<br> return arrayConSize;<br> }<br> function insertAfter(newElement,targetElement){//삽입 <br> var parent = targetElement.parentNode;<br> if(parent.lastChild == targetElement){<br> parent.appendChild(newElement);<br> }<br> else{<br> parent.insertBefore(newElement ,targetElement.nextSibling);<br> }<br> }<br> //스크롤 막대 높이 가져오기<br> function getPageScroll(){<br> var yScroll ;<br> if (self.pageYOffset) {<br> yScroll = self.pageYOffset;<br> } else if (document.documentElement && document.documentElement.scrollTop){<br> yScroll = document.documentElement.scrollTop;<br> } else if (document.body) {<br> yScroll = document.body.scrollTop;<br> }<br><br> arrayPageScroll = new Array('',yScroll)<br> return arrayPageScroll;<br> }<br> //페이지의 실제 크기 가져오기<br> function getPageSize(){<br> var xScroll,yScroll;<br><br> if (window.innerHeight && window.scrollMaxY){<br> xScroll = document.body.scrollWidth;<br> yScroll = window.innerHeight window.scrollMaxY;<br> } else if (document.body.scrollHeight > document.body.offsetHeight){<br> sScroll = document.body. scrollWidth;<br> yScroll = document.body.scrollHeight;<br> } else {<br> xScroll = document.body.offsetWidth;<br> yScroll = document.body.offsetHeight;<br> }<br><br> var windowWidth,windowHeight;<br> //var pageHeight,pageWidth; <br> if (self.innerHeight) {<br> windowWidth = self.innerWidth;<br> windowHeight = self.innerHeight;<br> } else if (document.documentElement && document.documentElement.clientHeight) {<br> window Width = document.documentElement.clientWidth;<br> windowHeight = document.documentElement.clientHeight;<br> } else if (document.body) {<br> windowWidth = document.body.clientWidth;<br> windowHeight = document.body.clientHeight;<br> }<br><br> var pageWidth,pageHeight<br> if(yScroll < windowHeight){<br> pageHeight = windowHeight;<br> } else {<br> pageHeight = yScroll;<br> }<br> if(xScroll < windowWidth) {<br> pageWidth = windowWidth;<br> } else {<br> pageWidth = xScroll;<br> }<br> arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)<br> return arrayPageSize;<br> }<br> //关闭弹出层<br> function closeLayer(){<br> document.getElementById("popupAddr").style.display = "none";<br> document.getElementById("bodybg").style.display = "none";<br> return false;<br> }<br> 风格设置 关闭 此处显示内容 设置提示 关闭 此处显示提示内容" 提示1 提示2 1 风格演示 关闭 此处显示内容
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
