コードをコピー コードは次のとおりです: < ;title>Web ページの特殊効果 - ウィンドウの特殊効果 - ポップアップ ウィンドウの後に Web ページの背景を暗くする効果ここをクリックしてウィンドウを開きます閉じるウィンドウ コンテンツ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> function 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> 点击显示 点击关闭 例 3: コードをコピー コードは次のとおりです: 点击弹出层效果 <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 span,#all_province div scan{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> bodyBack .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);// 执行関数数insertAfter( )<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> // ポップアップレイヤーを中央に配置ページの縦方向左右 ( Personality)<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){//Insert <br> varparent = 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.スクロール幅;<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 风格演示 关闭 此处显示内容 gt;
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
