jquery实现弹框效果

原创 2012年03月27日 20:46:19

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;}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JQuery弹出层效果制作 TipsWindown

http://www.nowamagic.net/jquery/jquery_JqueryPopup.php JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层。支持...

使用JQuery实现Edit in place效果的Input框

用过Gmail的应该都知道其内置的通讯录,当鼠标移动到联系人的姓名或者电话号码上时候就会自动进入编辑状态。这种方式对用户来说比较友好,没有弹出单独的编辑界面,用户可以再当前上下文环境中进行编辑。实现这...

基于jQuery实现的选项卡(滑动门)效果

上篇文章给大家详细的介绍了,如何使用jQuery实现弹出各种窗口效果,引起了很多朋友们得反响,今天再次给大家奉献一篇的新的基于jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果,希望...

jQuery实现焦点图播放效果

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)