首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现优雅的弹窗效果（6）

Posted in Javascript onFebruary 08, 2017

弹窗是网页中经常看到的效果，以前的弹窗是用window.open()等方式在浏览器窗口新建另一个新窗口来完成的，这种弹窗方式现在已经被很多浏览器所拦截。今天我们来用更加友好的方式来实现弹窗效果。完成的功能效果如图：

jQuery实现优雅的弹窗效果（6）

如图，在浏览器的左上方是两个button按钮，按下之后分别弹出左下角的窗口和中间的窗口，右下角的窗口当页面加载完成之后自动慢慢显示，之后又徐徐的淡出。基于div+css的模式，我们的先来建立html页面。

window.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实战:窗口效果</title>
<link type="text/css" rel="stylesheet" href="../css/window.css" rel="external nofollow" />
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/window.js"></script>
</head>
<body>
 <input type="button" value="左下角显示窗口" id="leftpop" />
 <input type="button" value="屏幕中间显示窗口" id="centerpop" />

 <div class="window" id="left">
 <div class="title">
  <img alt="关闭" src="../image/close.gif" />
  我是左边显示窗口的标题栏
 </div>
 <div class="content">
  我是左边显示窗口的内容区
 </div>
 </div>
 <div class="window" id="center">
 <div class="title">
  <img alt="关闭" src="../image/close.gif" />
  我是中间显示窗口的标题栏
 </div>
 <div class="content">
  <p>我是中间显示窗口的内容区</p>
 </div>
 </div> 
 <div class="window" id="right">
 <div class="title">
  <img alt="关闭" src="../image/close.gif" />
  我是右边显示窗口的标题栏
 </div>
 <div class="content">
  我是右边显示窗口的内容区
 </div>
 </div>
</body>
</html>

从html代码中可以看到，这里的窗口是用div来实现的，目前的html代码只是描绘了页面的基本骨架，能够效果离窗口效果还相差甚远，不过别急，添加上css代码，页面相对就好看多了。

window.css

.window {
 background-color: #D0DEF0;
 width: 250px;
 /*padding: 2px;*/
 margin: 5px;
 /*控制窗口绝对定位*/
 position: absolute;
 display: none;
}
.content {
 height: 150px;
 background-color: white;
 border: 2px solid #D0DEF0;
 padding: 2px;
 /*控制区域内容超过指定高度和宽度时显示滚动条*/
 overflow: auto;
}
.title {
 padding: 4px;
 font-size: 14px;
}
.title img {
 width: 14px;
 height: 14px;
 float: right;
 cursor: pointer;
}

为了看到当前效果，先将.window的display属性注释掉，或者将它的属性值改为”block”，看到的效果如图：

jQuery实现优雅的弹窗效果（6）

其实三个窗口是由三个div组成,每个div分为title和content两部分，title是标题栏区域，content是内容区域。为了达到窗口的视觉效果，给我们的title标题栏区域加背景颜色background-color，然后给我们的content内容区域加边框border: 2px solid #D0DEF0;，边框的颜色与标题栏一致。此时的效果如上图，目前只能看到一个窗口的原因是三个div占据了相同的位置，第三个窗口遮盖住了前两个窗口。不过没关系，我们可以用JavaScript代码来控制三个div的位置。

jQuery库函数提供了丰富多彩的插件功能，今天我们来编写自己的插件，简单的案例如下：

$.fn.hello = function() {
 alert("hello:" + this.val());
 return this;
}

只需要在需要的地方注册上本插件就行了。相应的，这里我们编写的插件mywin来专门处理我们的窗口功能效果。

window.js

/**
* 窗口位置的插件
*/
$.fn.mywin = function() {
 var windowobj = $(window);
 var browserWidth = $(window).width();
 var browserHeight = $(window).height();
 var scrollLeft = $(window).scrollLeft();
 var scrollTop = $(window).scrollTop();
 var cwinwidth = this.width();
 var cwinheight = this.height();
 var left = scrollLeft + (browserWidth - cwinwidth)/2;
 var top = cwinheight + (browserHeight - cwinheight)/2;
 this.css("left", left).css("top", top);
 $(this.children(".title").children("img")).click(function() {
 $(this).parent().parent().hide("slow");
 });

 return this;
}

上诉代码编写了本应用中中间窗口案例的插件，调用代码如下：

window.js

$(document).ready(function() {
 $("#centerpop").click(function() {
 $("#center").mywin().show("slow");
 });
});

插件中的代码思路是：为了计算窗口div的left和top属性值，我们需要拿到浏览器窗口的长browserWidth和宽browserHeight，以及窗口是否因为内容过多而又滚动条的位置scrollLeft和scrollTop。窗口div的left值=滚动条横坐标+(浏览器窗口的横向长度-窗口div横向长度)/2，top值=滚动条纵坐标+(浏览器窗口的纵向长度-窗口div纵向长度)/2。

最终完成完整的jQuery代码如下：

$(document).ready(function(){
 var centerwin = $("#center");
 var leftwin = $("#left");
 var rightwin = $("#right");
 $("#centerpop").click(function(){
 //鼠标点击按钮之后，把id为center的窗口显示在页面中间
 //计算位于屏幕中间的窗口的左边界和上边界的值
 //浏览器可视区域的宽和高，当前窗口的宽和高
 //需要考虑到横向滚动条的当前左边界值以及纵向滚动条的当前上边界值
 centerwin.show("slow");
 });
 $("#leftpop").click(function() {
 leftwin.slideDown("slow");
 });

 setTimeout(function () {
 centerwin.mywin({left: "center", top: "center"});
 leftwin.mywin({left: "left", top: "bottom"}, function(){
  leftwin.slideUp("slow");
 });
 var windowobj = $(window);
 var cwinwidth = rightwin.outerWidth(true);
 var cwinheight = rightwin.outerHeight(true);
 var browserwidth = windowobj.width();
 var browserheight = windowobj.height();
 var scrollLeft = windowobj.scrollLeft();
 var scrollTop = windowobj.scrollTop();
 var rleft = scrollLeft + browserwidth - cwinwidth;
 if ($.browser.safari) {
  rleft = rleft - 15;
 }
 if ($.browser.opera) {
  rleft = rleft + 15;
 }
 if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
  rleft = rleft - 20;
 }
 rightwin.mywin({left: "right", top: "bottom"}, function() {
  rightwin.hide();
 },{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue();
 },500);

});

/**
 *@param position表示窗口的最终位置,包含两个属性，一个是left，一个是top
 *@param hidefunc表示执行窗口隐藏的方法
 *@param initPos表示窗口初始位置，包含两个属性，一个是left，一个是top
 */
$.fn.mywin = function(position, hidefunc, initPos) {
 if (position && position instanceof Object) {
 var positionleft = position.left;
 var positiontop = position.top;

 var left;
 var top;
 var windowobj = $(window);
 var currentwin = this;
 var cwinwidth;
 var cwinheight;

 var browserwidth;
 var browserheight;
 var scrollLeft;
 var scrollTop;
 //计算浏览器当前可视区域的宽和高，以及滚动条左边界，上边界的值
 function getBrowserDim() {
  browserwidth = windowobj.width();
  browserheight = windowobj.height();
  scrollLeft = windowobj.scrollLeft();
  scrollTop = windowobj.scrollTop(); 
 } 
 //计算窗口真实的左边界值
 function calLeft(positionleft, scrollLeft, browserwidth, cwinwidth) {
  if (positionleft && typeof positionleft == "string") {
  if (positionleft == "center") {
   left = scrollLeft + (browserwidth - cwinwidth) / 2; 
  } else if (positionleft == "left") {
   left = scrollLeft; 
  } else if (positionleft == "right") {
   left = scrollLeft + browserwidth - cwinwidth;
   if ($.browser.safari) {
   left = left - 15;
   }
   if ($.browser.opera) {
   left = left + 15;
   }
   if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
   left = left - 20;
   }
  } else {
   left = scrollLeft + (browserwidth - cwinwidth) / 2; 
  }
  } else if (positionleft && typeof positionleft == "number") {
  left = positionleft;
  } else {
  left = 0;
  }
 }
 //计算窗口真实的上边界值 
 function calTop(positiontop, scrollTop, browserheight, cwinheight) {
  if (positiontop && typeof positiontop == "string") {
  if (positiontop == "center") {
   top = scrollTop + (browserheight - cwinheight) / 2;
  } else if (positiontop == "top") {
   top = scrollTop;
  } else if (positiontop == "bottom") {
   top = scrollTop + browserheight - cwinheight;
   if ($.browser.opera) {
   top = top - 25;
   }
  } else {
   top = scrollTop + (browserheight - cwinheight) / 2;
  }
  } else if (positiontop && typeof positiontop == "number") {
  top = positiontop;
  } else {
  top = 0;
  }
 }
 //移动窗口的位置
 function moveWin() {
  calLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);
  calTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);
  currentwin.animate({
  left: left,
  top: top
  },600); 
 }

 //定义关闭按钮的动作
 currentwin.children(".title").children("img").click(function() {
  if (!hidefunc) {
  currentwin.hide("slow") ;
  } else {
  hidefunc();
  }
 });

 if (initPos && initPos instanceof Object) {
  var initLeft = initPos.left;
  var initTop = initPos.top;
  if (initLeft && typeof initLeft == "number") {
  currentwin.css("left", initLeft); 
  } else {
  currentwin.css("left", 0);
  }
  if (initTop && typeof initTop == "number") {
  currentwin.css("top", initTop); 
  } else {
  currentwin.css("top", 0);
  }
  currentwin.show();
 }
 cwinwidth = currentwin.outerWidth(true);
 cwinheight = currentwin.outerHeight(true);
 currentwin.data("positionleft", positionleft);
 currentwin.data("positiontop", positiontop);
 getBrowserDim();
 moveWin();

 var scrollTimeout;
 //浏览器滚动条滚动时，移动窗口的位置
 $(window).scroll(function(){
  //判断一下当前窗口是否可见
  if (!currentwin.is(":visible")) {
  return; 
  }
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(function(){
  getBrowserDim(); 
  moveWin();
  },300);
 });
 //浏览器大小改变时，移动窗口的位置
 $(window).resize(function(){
  //判断一下当前窗口是否可见
  if (!currentwin.is(":visible")) {
  return; 
  }
  getBrowserDim(); 
  moveWin(); 
 });
 //返回当前对象，以便可以级联的执行其他方法
 return currentwin;
 }
}

左下角和中间窗口的div是靠触发click事件来显示窗口，在滚动条滚动时触发scroll事件来重新调用计算div的top和left的函数。右下角的窗口是徐徐升起的窗口，所以在文档加载完成的时候就显示窗口，处理的代码是放在setTimeout()事件里面，setTimeout函数里面的fadeOut让窗口达到渐变透明的效果。

案例代码托管地址：https://github.com/shizongger/JqueryInAction

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery实现优雅的弹窗效果（6）

- Author -

少年张翠山

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
详解如何构建Angular项目目录结构
Jul 13 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
基于vue实现分页效果
Nov 06 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
Jun 05 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 #Javascript
深入理解js中的加载事件
Feb 08 #Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 #Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 #Javascript
setTimeout学习小结
Feb 08 #Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 #Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 #Javascript
ECharts(3) lua(3) postcss-px2rem(1) 绝对定位(1) props(1) mixin(1) 相对定位(1) ref(1) 游标(1) 匹配(1)
You might like
PHP的面试题集
2006/11/19 PHP
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php adodb连接不同数据库
2009/03/19 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
分分钟入门python语言
2018/03/20 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
Python列表list排列组合操作示例
2018/12/18 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
生产主管岗位职责
2013/11/10 职场文书
职务聘任书范文
2014/03/29 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
现场活动策划方案
2014/08/22 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL