现在的位置: 网页制作教程JS网页特效 >正文
JavaScript脚本

点击弹出窗口 背景变灰不可点击

发表于2016/11/20 JS网页特效 0条评论 ⁄ 热度 2,459℃

很多网站都有弹出窗口的效果,比如你点击某个按钮,弹出一个居中的浮动小窗口,背景变灰,上面的元素不可点击。

下面是实现的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代码。

  • 暂无评论