Jquery：JS弹出窗口DIV层效果

原出处：http://blog.sina.com.cn/s/blog_607726bd0100dp7o.html

１）创建网页 index.html

创建2个html区块，一个DIV名为popupContact（弹出窗口中所包含的内容），初始状态下它是不可见的（通过CSS实现）；另一个DIV区块：backgroundPopup，主要用做陪衬突出我们弹出窗口的效果，它初始状态也是不可见的。

２）加入CSS样式

给网页添加一些CSS样式，主要是将popupContact和 backgroundPopup 2个DIV区块隐藏起来。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
<style type="text/css">
#backgroundPopup{   
    display:none;   
    position:fixed;   
    position:absolute;   
    height:100%;   
    width:100%;   
    top:0;   
    left:0;   
    background:#000000;   
    border:1px solid #cecece;   
    z-index:1;   
}   

#popupContact{   
    display:none;   
    position:fixed;   
    position:absolute;   
    height:384px;   
    width:408px;   
    background:#FFFFFF;   
    border:2px solid #cecece;   
    z-index:2;   
    padding:12px;   
    font-size:13px;   
}   

#popupContact h1{   
    text-align:left;   
    color:#6FA5FD;   
    font-size:22px;   
    font-weight:700;   
    border-bottom:1px dotted #D3D3D3;   
    padding-bottom:2px;   
    margin-bottom:20px;   
}   
#popupContactClose{   
    font-size:14px;   
    line-height:14px;   
    right:6px;   
    top:4px;   
    position:absolute;   
    color:#6fa5fd;   
    font-weight:700;   
    display:block;   
}
</style>
</head>
 
 <body>  
    <center> 
        <div id="button"><input type="submit" value="点击这里查看效果" /></div>  
    </center>  
    <div id="popupContact">  
        <a id="popupContactClose">X</a>  
        <h1>弹出窗口的标题</h1>  
        <p id="contactArea">  
            这就是我们创建的漂亮DIV弹窗效果。可以看到jQuery实在是非常强大，我们仅需少量的CSS和JavaScript代码即可完成这一效果。<br/><br/>  
            我们可以在这个弹窗之中放置一个登录框、注册表单、重要事件提醒等等。   
            <br/><br/>  
            要关闭这个窗口，请点击右上方的X按钮或点击弹窗外的背景或按下键盘上的ESC键。   
            <br/><br/>
        </p>  
    </div>  
    <div id="backgroundPopup"></div>  
</body>    
</html>

３）添加JavaScript代码 popup.js

　　实现DIV弹出窗口效果的核心步骤。

//初始化：是否开启DIV弹出窗口功能
//0 表示开启; 1 表示不开启;
var popupStatus = 0;

//使用Jquery加载弹窗 
function loadPopup(){   
    //仅在开启标志popupStatus为0的情况下加载  
    if(popupStatus==0){   
        $("#backgroundPopup").css({   
            "opacity": "0.6"  
        });   
        //fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
        //$("#backgroundPopup").fadeIn("slow");   
        //$("#popupContact").fadeIn("slow");   
        $("#backgroundPopup").show();   
        $("#popupContact").show(); 
        popupStatus = 1;   
    }   
} 

   
//将弹出窗口定位在屏幕的中央
function centerPopup(){   
    //获取系统变量
    var windowWidth = document.documentElement.clientWidth;   
    var windowHeight = document.documentElement.clientHeight;   
    
    //alert("屏宽：" + windowWidth + "，" + "屏高：" + windowHeight);
    var popupHeight = $("#popupContact").height();   
    var popupWidth = $("#popupContact").width();   
    //居中设置   
    $("#popupContact").css({   
        "position": "absolute",   
        "top": windowHeight/2-popupHeight/2,   
        "left": windowWidth/2-popupWidth/2,   
    });   
}


//使用Jquery去除弹窗效果 
function disablePopup(){   
    //仅在开启标志popupStatus为1的情况下去除
    if(popupStatus==1){   
        //$("#backgroundPopup").fadeOut("slow");   
        //$("#popupContact").fadeOut("slow");   
        $("#backgroundPopup").hide();   
        $("#popupContact").hide();
        popupStatus = 0;   
   }   
}  
    
$(document).ready(function(){   
    //打开弹出窗口   
    //按钮点击事件!
    $("#button").click(function(){   
        //调用函数居中窗口
        centerPopup();   
        //alert("111");
        //调用函数加载窗口
        loadPopup();  
    });
    
   //关闭弹出窗口   
    //点击"X"所触发的事件
    $("#popupContactClose").click(function(){   
        disablePopup();   
    }); 
});

４）代码流程解释

创建一个名称为popupStatus的变量来控制弹出窗口的显示与否。

//初始化：是否开启DIV弹出窗口功能
//0 表示开启; 1 表示不开启;
var popupStatus = 0;

接下来是主函数——Jquery加载弹窗函数：

//使用Jquery去除弹窗效果 
function disablePopup(){   
    //仅在开启标志popupStatus为1的情况下去除
    if(popupStatus==1){   
        //$("#backgroundPopup").fadeOut("slow");   
        //$("#popupContact").fadeOut("slow");   
        $("#backgroundPopup").hide();   
        $("#popupContact").hide();
        popupStatus = 0;   
   }   
}

关闭/去除弹出窗口的函数：

//使用Jquery去除弹窗效果 
function disablePopup(){   
    //仅在开启标志popupStatus为1的情况下去除
    if(popupStatus==1){   
        //$("#backgroundPopup").fadeOut("slow");   
        //$("#popupContact").fadeOut("slow");   
        $("#backgroundPopup").hide();   
        $("#popupContact").hide();
        popupStatus = 0;   
   }   
}

控制弹窗出现在屏幕的中央位置：

//将弹出窗口定位在屏幕的中央
function centerPopup(){   
    //获取系统变量
    var windowWidth = document.documentElement.clientWidth;   
    var windowHeight = document.documentElement.clientHeight;   
    
    //alert("屏宽：" + windowWidth + "，" + "屏高：" + windowHeight);
    var popupHeight = $("#popupContact").height();   
    var popupWidth = $("#popupContact").width();   
    //居中设置   
    $("#popupContact").css({   
        "position": "absolute",   
        "top": windowHeight/2-popupHeight/2,   
        "left": windowWidth/2-popupWidth/2,   
    });   

    //以下代码仅在IE6下有效，未测试
    $("#backgroundPopup").css({   
    "height": windowHeight   
    }); 

}

通过jQuery对事件的触发控制实现弹出DIV效果。

当用户触发点击按钮事件时，依次执行居中函数（centerPopup）和窗口加载函数（loadPopup）。

当用户点击弹出窗口右上方的"X"形关闭按钮时，触发一个事件执行：关闭弹窗函数。

需要注意的是，所有事件触发过程都必须包含在以下代码中：

$(document).ready(function(){   
    //执行触发事件的代码区域  
});

当按下id为#button的按钮时触发弹出窗口的事件：

//打开弹出窗口   
//按钮点击事件!
$("#button").click(function(){   
        //调用函数居中窗口
        centerPopup();   
        //alert("111");
        //调用函数加载窗口
        loadPopup();  
});

关闭事件的触发：

点击弹窗右上角的"X"

//关闭弹出窗口   
//点击"X"所触发的事件
$("#popupContactClose").click(function(){   
    disablePopup();   
});

点击窗口周围的背景

//点击窗口以外背景所触发的关闭窗口事件!
$("#backgroundPopup").click(function(){   
    disablePopup();   
});

按下键盘上的ESC键

//键盘按下ESC时关闭窗口!
$(document).keypress(function(e){   
    if(e.keyCode==27 && popupStatus==1){   
        disablePopup();   
    }   
});

更多相关文章

随机推荐