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(); } });
