关闭

jquery实现弹框效果

2239人阅读 评论(0) 收藏 举报

window.html文件

<!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>jquery实现弹框效果</title>
</head>
<link type="text/css" href="window.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="window.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function (){
  //居中效果
  $("#btn_center").click(function (){
    $(window).scroll(function (){
   
    popCenterwindow();
    });
  
   });
  //弹框左下角效果
     $("#btn_left").click(function (){
   $(window).scroll(function (){
   
    popLeftBottomWindow();
    });
   });
   //弹框左下角效果
  
     $("#btn_right").click(function (){
   $(window).scroll(function (){
   
    popRightBottomWindow();
    });
  
   });
 });

</script>
<body>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<input type="button" value="弹出居中框" id="btn_center">
<input type="button" value="弹出居左下角框" id="btn_left">
<input type="button" value="弹出居右下角框" id="btn_right">
<div id="center" class="tan_window">
  <div class="title"><img src="x.jpg">简单工作室欢迎你-居中</div>
  <div class="content">简单工作任由你自主想象开发,独立、自由的空间</div>
</div>
<div id="left" class="tan_window">
  <div class="title"><img src="x.jpg">简单工作室欢迎你-居左</div>
  <div class="content">简单工作任由你自主想象开发,独立、自由的空间</div>
</div>
<div id="right" class="tan_window">
  <div class="title"><img src="x.jpg">简单工作室欢迎你-居右</div>
  <div class="content">简单工作任由你自主想象开发,独立、自由的空间</div>
</div>
</body>
</html>
2、window.js文件


//定义浏览器的高度
var windowHeight;
//定义浏览器的宽度
var windowWidth;
//定义弹框的高度
var popHeight;
//定义弹框的宽度
var popWidth;
//获取滚动条的高度
var scrollTop;
//获取滚动条的宽度
var scrollLeft;
//延迟时间
var timeout;
function init(){
 windowHeight=$(window).height();
 windowWidth=$(window).width();
 popHeight=$(".tan_window").height();
 popWidth=$(".tan_window").width();
 scrollTop=$(window).scrollTop();
 scrollLeft=$(window).scrollLeft();
 
 };
//定义关闭窗口的函数

function closeWindow(){
 $(".title img").click(function (){
  $(this).parent().parent().hide("slow");
  
  });
 };
//定义弹出居中窗口的操作
function popCenterwindow(){
 clearTimeout(timeout);
 timeout=setTimeout(function (){
  init();
 var popY=(windowHeight-popHeight)/2+scrollTop;
  var popX=(windowWidth-popWidth)/2+scrollLeft;
 $("#center").animate({top:popY,left:popX},300).show("slow");
},300);
 //关闭窗口
 closeWindow(); 
 };
 
//弹出居左下角框

function popLeftBottomWindow(){
 clearTimeout(timeout);
 timeout=setTimeout(function (){
 init();
 
 var popY=windowHeight-popHeight+scrollTop-10;
  var popX=scrollLeft-10;
 $("#left").animate({top:popY,left:popX},300).show("slow");
},300);
 //关闭窗口
 closeWindow(); 
 
 };
//弹出居右下角
function popRightBottomWindow(){
 //每次之前清除掉
 clearTimeout(timeout);
 timeout=setTimeout(function (){
 init();
 var popY=windowHeight-popHeight+scrollTop-10;
  var popX=windowWidth+scrollLeft-popWidth-10;
 //$("#right").css("top",popY).css("left",popX).show("slow");
 $("#right").animate({top:popY,left:popX},300).show("slow");
 //关闭窗口
},300);
 closeWindow(); 
 
 };

3、window.css文件

.tan_window{
 
 background-color:#0F9;
 width:230px;
 padding:2px;
 margin:5px;
 display:none;
 position:absolute;
 }
 .title{
  padding:2px;
  font-size:14px;
  color:#C09;}
.content{
   width:220px;
   height:150px;
   background-color:#FFF;
   font-size:14px;
   padding:2px;
   overflow:auto;
  
  }
.title img{
   float:right;
   cursor:pointer;}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:104304次
    • 积分:1997
    • 等级:
    • 排名:第19578名
    • 原创:95篇
    • 转载:13篇
    • 译文:2篇
    • 评论:13条
    文章分类
    最新评论