管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

javascript弹出一个层并增加一个覆盖层

复制代码 代码如下:

　　<!--内容层-->

　　<div id="ShopConfirmLayer" style="position:absolute;top:300px;left:100px;z-index:900;border:1px red solid;width:500px;display:none;">

　　<input name="button1" value="关闭" type="button" onclick="CloseShopConfirm()"/>

　　</div>

　　<!--覆盖层-->

　　<div id="webBgLayer" style="position:absolute;top:0px;left:0px;z-index:899;background-color:#ccc;height:100%;width:100%;display:none;-moz-opacity:0.5;filter:alpha(opacity=50);"></div>

　　<script type="text/javascript">

　　function ShopConfirm(str){

　　var ShopConfirmLayer=document.getElementById("ShopConfirmLayer");

　　var webBgLayer=document.getElementById("webBgLayer");

　　ShopConfirmLayer.innerHTML=str;

　　ShopConfirmLayer.style.display="";

　　ShopConfirmLayer.style.left=parseInt((document.documentElement.scrollWidth-ShopConfirmLayer.offsetWidth)/2)+document.documentElement.scrollLeft+"px";

　　ShopConfirmLayer.style.top=Math.abs(parseInt((document.documentElement.clientHeight-ShopConfirmLayer.offsetHeight)/2))+document.documentElement.scrollTop+"px";

　　webBgLayer.style.display="";

　　webBgLayer.style.height=document.documentElement.scrollHeight+"px";

　　}

　　function CloseShopConfirm(){

　　var ShopConfirmLayer=document.getElementById("ShopConfirmLayer");

　　var webBgLayer=document.getElementById("webBgLayer");

　　ShopConfirmLayer.style.display="none";

　　webBgLayer.style.display="none";

　　}

　　</script>

　　注意上面的代码头部DTD应该是这样：

　　

复制代码 代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

教程首页 更多教程