이 문서의 예에서는 j가 NetEase 클릭 팝업 프롬프트를 모방하고 배경 효과를 어둡게 하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
여기의 팝업 프롬프트는 배경이 어두워지는 프롬프트 레이어 효과, 둥근 모서리, 아름답고 간결하며 약간의 코드가 너무 많은 NetEase를 모방한 것입니다.
작동 효과는 아래와 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/js-sina-dialog-bgcolor-codes/
구체적인 코드는 다음과 같습니다.
<html> <head> <title>点击弹出提示,背景变暗</title> <script> function msg(info){ var p=document.createElement("DIV"); if (!info) var info='<a href="#" target="_blank" rel="external">欢迎光临</a>'; p.id="p"; p.style.position="absolute"; p.style.width=document.body.scrollWidth; p.style.height=(document.body.offsetHeight>document.body.scrollHeight)?'100%':document.body.scrollHeight; p.style.zIndex='998'; p.style.top='0px'; p.style.left='0%'; p.style.backgroundColor="gray"; p.style.opacity='0.5'; p.style.filter="alpha(opacity=80)"; document.body.appendChild(p); var p1=document.createElement("DIV"); var top=parseInt(parseInt(document.body.scrollHeight)*0.25)+document.body.scrollTop; p1.style.position="absolute"; p1.style.width="300px"; p1.id="p1"; var left=Math.ceil(((document.body.scrollWidth)-parseInt(p1.style.width.replace('px','')))/2)+document.body.scrollLeft; p1.style.height="200px"; p1.style.zIndex='999'; p1.style.top=top+'px'; p1.style.left=left+'px'; p1.style.border="0px solid red"; var html=""; html+="<center>" html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red;'></div>" html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>" html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>" html+="<div class='p1' style='height:20px;overflow:hidden;background:red;width:300px;border-left:1px solid red;border-right:1px solid red;color:#fff;font-size:9pt;font-weight:bold;text-align:left;'> ⊙ 友情提示:</div>" html+="<div id='c' style='height:150px;width:300px;background-color:#FEEACB;overflow:hidden;border-left:1px solid red;border-right:1px solid red;padding-top:40px;font-size:9pt;'>"+info+"<br><br><br>[ <a href='javascript:this.cancle()'> 关闭</a> ]</div>" html+="<div class='p1' style='height:1px;overflow:hidden;background:#FEEACB;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>" html+="<div class='p2' style='height:1px;overflow:hidden;background:#FEEACB;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>" html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red'></div>" html+="</center>" document.body.appendChild(p1); p1.innerHTML=html; var arr=document.getElementsByTagName("select"); var i=0; while(i<arr.length){ arr[i].style.visibility='hidden'; i++; } this.cancle=function(){ document.body.removeChild(document.getElementById('p')); document.body.removeChild(document.getElementById('p1')); var arr=document.getElementsByTagName("select"); var i=0; while(i<arr.length){ arr[i].style.visibility='visible'; i++; } } } </script> </head> <body> <input value='点击弹出提示' type='button' onClick='msg()' /> </body> </html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.