首页
所有分类
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 相关文章推荐
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
js中小数转换整数的方法
Jan 26 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
touch.js 拖动、缩放、旋转 （鼠标手势）功能代码
Feb 04 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
layui table 获取分页 limit的方法
Sep 20 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
自我评价(886) SOA面试题(9) 自荐信(981) 职业生涯规划书(234) 自我鉴定(671) 求职信(1029) 创业计划书(312) 思想汇报(404) 推荐信(292) 岗位职责(1324)
You might like
利用 window_onload 实现select默认选择
2006/10/09 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
PHP数据过滤的方法
2013/10/30 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
javascript实现连续赋值
2015/08/10 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
详解python调度框架APScheduler使用
2017/03/28 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python flask中动态URL规则详解
2019/11/22 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
农场厂长岗位职责
2013/12/28 职场文书
优秀交警事迹材料
2014/01/26 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL