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

基于animate.css弹出框弹出关闭特效 (5星级)

  • cometwo
  • cometwo
  • 2016年01月03日 12:51
  • 1418

【JavaScript】(9)——实例:滑动效果的弹出框

背景:用户的需求千奇百怪,为了满足用户对界面的需求,我这只小菜鸟也是“拼了小命”了。弹出框,大家都很熟悉吧,但是在弹出框中加上滑动效果,这个就是有点小难了,为了这个效果我也是搜寻了很多地方呀,最后的最...
  • u013043341
  • u013043341
  • 2016年03月27日 21:55
  • 1144

[demo]仿IOS底部弹框效果及Android各类对话框和弹框效果

ActionSheetDialog,Custome Dialog,Show Anim,Dismiss Anim 仿IOS底部弹框效果
  • Jason_996
  • Jason_996
  • 2016年05月18日 17:51
  • 5169

html 自定义弹框效果

页面系统弹框往往不能满足我们的需求,多数需要自定义弹框。写了几个自定义弹框样式。 alertView.js/** * Created by rayootech on 16/8/12. */ va...
  • zww1984774346
  • zww1984774346
  • 2016年08月13日 16:08
  • 2518

Axure 动态面板实现弹出框效果

今天在画原型图的时候遇到了个弹出框效果的实现,感觉挺有意思的,拿出来share下~           如图:当我点击删除按钮后,如果用户选择删除,则要求要弹出一个对话框来让用户输入处理备注,如果...
  • lhc2207221755
  • lhc2207221755
  • 2014年11月11日 08:11
  • 6733

自定义dialog弹框效果

通常项目中会用到比较特殊的弹框,则就需要自定义写一个dialog,需要重新画个布局添加到dialog中。这里就需要自定义一个TestDialog类继承与Dialog。 public class Acc...
  • HUandroid
  • HUandroid
  • 2016年11月27日 18:47
  • 952

html5 弹出遮罩层

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • nux_123
  • nux_123
  • 2015年10月14日 11:08
  • 1754

页面中最常用的弹框。自适应。适合移动端。

我们经常会很头疼如何实现一个对象自然的居中。正好显示在窗口的中间部分。我也是刚刚好好研究了一份。才发现这其中的奥妙。顿时觉得豁然开朗。 前提1:我们讨论的是当弹框的宽度为百分比,高度根据内容自适应,...
  • hewu1122
  • hewu1122
  • 2016年01月12日 22:43
  • 3720

angularJs页面弹框的实现

弹框需要三样东西,点击发生弹框事件的按钮,弹框页面,js逻辑。 下面用一个实例解释: 1,按钮:按钮的点击事件为toSendEmail()...
  • xiaoyuer666999
  • xiaoyuer666999
  • 2017年05月09日 09:37
  • 1065

CSS3实现3D效果的弹出框

首先,用css3做一个触发弹出框的按钮: border-radius: 10px; /*圆角*/ -webkit-border-radius: 10px; -moz-border-radius...
  • echoyoung46
  • echoyoung46
  • 2015年06月05日 16:06
  • 327
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现弹框效果
举报原因:
原因补充:

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