jquery实现弹窗效果

原创 2012年03月27日 17:42:21

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>弹出窗口</title>
<link type="text/css" rel="stylesheet" href="window.css">
<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="window.js"></script>
<script language="javascript">
 $(document).ready(function (){
  $("#btn_center").click(function (){
   $(window).scroll(function (){
    popcenterWindow();
    });
   });
  $("#btn_right").click(function (){
   $(window).scroll(function (){
    poprightWindow();
    });
   });
  $("#btn_left").click(function (){
   $(window).scroll(function (){
    popleftWindow();
   });
   });
  });
</script>
</head>

<body>
<input type="button" value="弹出居中的窗口" id="btn_center">
<input type="button" value="弹出居右的窗口" id="btn_right">
<input type="button" value="弹出居左的窗口" id="btn_left">
<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>


<div class="window" id="center">
 <div class="title"><img src="close.gif">csdn欢迎您</div>
 <div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="right">
 <div class="title"><img src="close.gif">csdn欢迎您</div>
 <div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="left">
 <div class="title"><img src="close.gif">csdn欢迎您</div>
 <div class="content">哈哈哈哈哈哈哈</div>
</div>

</body>
</html>

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=$(".window").height();
 //获得弹窗的宽度
 popWidht=$(".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-popWidht)/2+scrollleft;
 $("#center").animate({top:popY,left:popX},300).show("slow");},300);
 closeWindow();
}
function popleftWindow(){
 clearTimeout(timeout);
 timeout=setTimeout(function (){
 init();
 var popY=windowHeight+scrollTop-popHeight-10;
 var popX=scrollleft-5;
 $("#left").animate({top:popY,left:popX},300).show("slow");},300);
 closeWindow();
}
function poprightWindow(){
 clearTimeout(timeout);
 timeout=setTimeout(function (){
 init();
 var popY=windowHeight-popHeight+scrollTop-10;
 var popX=windowWidth-popWidht+scrollleft-10;
 $("#right").animate({top:popY,left:popX},300).show("slow");},300);
 closeWindow();
}

window.css

/* CSS Document */
.window{
 width:250px;
 background-color:#3FF;
 padding:2px;
 margin:5px;
 position:absolute;
 display:none;
 }
.content{
 height:150px;
 background-color:#FFF;
 padding:2px;
 font-size:14px;
 overflow:auto;
 }

.title{
 padding:2px;
 color:#999;
 font-size:14px;
 }

.title img{
 float:right;
 cursor:pointer;
 }

 

Android——超炫dialog弹窗效果,及自定义view dialog

在实际开始种,每个android应用或多或少都会有一些dialog的弹窗,系统自带v7的还能看,v4就实在看不下去了,太他妈丑了。有些开发者闲麻烦,只能自己写一个layout实现,但是这样又不麻烦吗?...
  • u013836857
  • u013836857
  • 2016年07月27日 16:22
  • 8130

使用jQuery实现弹出框效果

一,背景 由于在项目中需要用到的一个页面效果是弹出框,在项目中我使用jquery的ui插件,来实现这个功能,用法也比较简单 二,准备环境 1)引入jquery插件。 在index.ht...
  • smart_seed
  • smart_seed
  • 2016年11月28日 18:38
  • 4969

自己写了一个jQuery的弹出层,非常非常简单

非常简单的 jquery 弹出层
  • djk8888
  • djk8888
  • 2016年09月09日 10:42
  • 5612

jquery弹出窗口插件

  • 2010年03月30日 14:27
  • 51KB
  • 下载

JQuery实现的弹窗效果

这是笔者实际项目中的一个需求,我们先来看看特效。页面加载时弹出窗口,点击关闭案例,窗口消失并呈现动画效果。 实现代码如下: ...
  • Rongbo_J
  • Rongbo_J
  • 2015年06月19日 16:20
  • 1551

jQuery 精简版弹出对话框层

原文地址:http://wange.im/jquery-dialog-layer.html 弹出对话框在一个网站中是相对比较常见的功能,无论是确认信息还是注册申请,都可能会用到弹出层。用 JS 来实...
  • johnstrive
  • johnstrive
  • 2014年12月18日 23:07
  • 1178

jQuery弹窗插件

对自定义插件感兴趣的童鞋可以看看!
  • qq_34095828
  • qq_34095828
  • 2017年05月05日 08:32
  • 248

jQuery手机端弹出层提示对话框

  • 2017年02月06日 16:05
  • 65KB
  • 下载

jQuery弹出Iframe窗口,应该比$.dialog好用

核心代码如下:/** * iframe弹出层 例子:openDialogByIframe(550,450,'新建单位','add.do'); * * @param width * ...
  • xzknet
  • xzknet
  • 2015年02月11日 09:31
  • 6918

jQueryMobile的组件之弹出窗(popup)

data-rel="popup"——设置当前元素具有弹出窗的功能; data-role="popup"——设置当前元素为弹出窗; data-position-to="window"——设置弹出窗出...
  • bboyjoe
  • bboyjoe
  • 2015年08月30日 18:58
  • 7325
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现弹窗效果
举报原因:
原因补充:

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