淡入淡出弹出层

sty2008boy · 发表于 2013-2-7 14:56:28

<!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" /><title>弹出框-Download by http://www.codefans.net</title><style type="text/css"></style><script src="jquery-1.4.2.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){//初始化：是否开启DIV弹出窗口功能//0 表示开启; 1 表示不开启;var popupStatus = 0;//使用Jquery加载弹窗 function loadPopup(){ //仅在开启标志popupStatus为0的情况下加载 if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //使用Jquery去除弹窗效果 function disablePopup(){ //仅在开启标志popupStatus为1的情况下去除if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //将弹出窗口定位在屏幕的中央function centerPopup(){ //获取系统变量var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; 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 }); }//打开弹出窗口 //按钮点击事件!$("#button").click(function(){ //调用函数居中窗口centerPopup(); //调用函数加载窗口loadPopup(); });//关闭弹出窗口 //点击"X"所触发的事件$("#popupContactClose").click(function(){ disablePopup(); }); //点击窗口以外背景所触发的关闭窗口事件!$("#backgroundPopup").click(function(){ disablePopup(); }); //键盘按下ESC时关闭窗口!$(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); });</script></head><body> <center> <div id="button"><input type="submit" value="点击这里查看效果" /></div> </center> <div id="popupContact"> <a id="popupContactClose">x</a> <h1>弹出窗口的标题</h1> 这就是我们创建的漂亮DIV弹窗效果。可以看到jQuery实在是非常强大，我们仅需少量的CSS和JavaScript代码即可完成这一效果。 我们可以在这个弹窗之中放置一个登录框、注册表单、重要事件提醒等等。 要关闭这个窗口，请点击右上方的X按钮或点击弹窗外的背景或按下键盘上的ESC键。 </div> <div id="backgroundPopup"></div> </body></html>

		自动登录	找回密码
密码			立即注册

淡入淡出弹出层

浏览过的版块