js 弹出层

yasuoji120

浏览: 6019 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

Chrome 资讯 Firefox CSS 浏览器

今天在整理代码的时候找到了去年从一个同事手里收集到的一个挺不错的JS弹出层，呵呵，废话不多说，贴代码。

<html>
<head>
<title>JS弹出窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<script>
//测试DAlert对象
var dc;
function Show1(){
     //创建提示框内容部分
     var d = document.createElement_x("div"); //创建主要显示DIV
     d.style.width="560px"; //DIV样式设置
     d.style.height="300px";
     d.style.backgroundColor="#999";
     d.style.padding="10px";
     //向提示框内容部分画需要显示的信息
     d.innerHTML="<div style='float:left;font-weight:bold;height:20px;line-height:20px; width:550px;font-size:12px'><span style='float:left;'>网站小统计</span><a href='javascript:;' style='float:right;' onclick=\"Hide1()\">关闭窗口</a></div><div><iframe frameborder='0' id='kj' name='kj' style='width:540px;height:280px;' scrolling='no' src=\'http://www.yasuoji120.com\'/> </iframe></div>";//DIV内容

     //实例化提示框
     dc = new DAlert(d);
     //显示提示框
     dc.show();
     }

//提示框里的Button按钮点击事件
    function Hide1(){
    //移除对话框
      dc.remove(); //移除DIV
     }

function DAlert(mesDIV){
    this.mesDIV=mesDIV;
    //创建提示框底层
    this.boDIV = document.createElement_x("div");
    //获取body中间点
    var x=document.body.clientWidth/2,y=document.body.clientHeight/2;
    //配置样式
    this.boDIV.style.opacity="0.50";
    this.boDIV.style.filter="Alpha(opacity=50);";
    this.boDIV.style.backgroundColor="#CCCCCC";
    this.boDIV.style.height="100%";
    this.boDIV.style.width="100%";
    this.boDIV.style.marginTop="0px";
    this.boDIV.style.marginLeft="0px";
    this.boDIV.style.position="absolute";
    this.boDIV.style.top="0px";
    this.boDIV.style.left="0px";
    this.boDIV.style.zIndex=100;

    //显示提示框
    this.show = function(){
        //显示提示框底层
          document.body.appendChild(this.boDIV);
        //显示mesDIV
        document.body.appendChild(this.mesDIV);
        //把mesDIV定位到body中间
        this.mesDIV.style.position="absolute";//设置弹出层为绝对定位
        x=x-this.mesDIV.clientWidth/2;

        y=y-this.mesDIV.clientHeight/2;

        this.mesDIV.style.top=y+"px"; //距离网页头部距离
        this.mesDIV.style.left=x+"px"; //左边距离
        this.mesDIV.style.zIndex=101; //Zindex参数，在css里写做z-index
      }

    //移除提示框
      this.remove = function(){
          document.body.removeChild(this.boDIV);
        document.body.removeChild(this.mesDIV);
      }
}
</script>
<body>
<a href="#" onClick="Show1()">点击我啊进入易迅制冷资讯网</a>

</body>
</html>

代码经测试，在IE6,7,8 ，firefox，chrome浏览器均可使用。

分享到：