很多网站都有弹出窗口的效果,比如你点击某个按钮,弹出一个居中的浮动小窗口,背景变灰,上面的元素不可点击。
下面是实现的js代码,另外在本文的最下面还提供案例的下载,有需要的同学可以点击下载。
<script type="text/javascript"> var isshow=0;//0小窗口没有显示,1小窗口已显 function creatediv() { var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=505;//提示窗口的高度 var sWidth,sHeight; if( top.location == self.location ) doc = document; var docElement = doc.documentElement; sWidth=docElement.clientWidth; sHeight = docElement.clientHeight; if( docElement.scrollHeight > sHeight ) sHeight = docElement.scrollHeight; var bgObj=document.createElement("div"); bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.left="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.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); var msgObj=document.createElement("div"); msgObj.setAttribute("id","msgDiv"); msgObj.setAttribute("align","center"); msgObj.style.position = "absolute"; msgObj.style.left = "50%"; msgObj.style.background="#fff"; msgObj.style.marginLeft = "-200px" ; msgObj.style.top = (document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+"px"; msgObj.style.width = msgw + "px"; msgObj.style.height =msgh + "px"; msgObj.style.zIndex = "10001"; msgObj.innerHTML = "这是弹出的小窗口!<br /><a href=\"javascript:void(0);\" onclick='delWinD();return false;'>点我关闭窗口</a>"; document.body.appendChild(msgObj); } function delWinD() { document.getElementById("bgDiv").style.display="none"; document.getElementById("msgDiv").style.display="none"; isshow=0; } function show() { isshow=1; if(!document.getElementById("msgDiv"))//小窗口不存在 creatediv(); else { document.getElementById("bgDiv").style.display=""; document.getElementById("msgDiv").style.display=""; document.getElementById("msgDiv").style.top=(document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+"px"; } } </script> //js
这就是实现点击弹出小窗口的js代码。
声明:如需转载,请注明来源于www.webym.net并保留原文链接:http://www.webym.net/jiaocheng/223.html