首页
所有分类
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数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
js导出txt示例代码
Jan 14 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
JavaScript中操作字符串小结
May 04 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
详解Node.js如何处理ES6模块
May 15 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
tree shaking(1) MutationObserver(1) kubernetes(1) Mysql8(2) celery(1) HBuilder(1) 条形码(1) SeaTable(1) OOP(1) Three.js(1)
You might like
openflashchart 2.0 简单案例php版
2012/05/21 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
JavaScript 特殊字符
2007/04/05 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
SVG实现时钟效果
2018/07/17 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
详解JavaScript 为什么要有 Symbol 类型？
2019/04/03 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
Python中文竖排显示的方法
2015/07/28 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
深入理解Python异常处理的哲学
2019/02/01 Python
python redis 删除key脚本的实例
2019/02/19 Python
python与字符编码问题
2019/05/24 Python
python @classmethod 的使用场合详解
2019/08/23 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
英国手工布艺沙发在线购买：Sofas & Stuff
2018/03/02 全球购物
竞选卫生委员演讲稿
2014/04/28 职场文书
2014年保育员工作总结
2014/12/02 职场文书
婚宴新娘致辞
2015/07/28 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Python超详细分步解析随机漫步
2022/03/17 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python
深入理解 Golang 的字符串
2022/05/04 Golang