jQuery实现点击按钮弹出可关闭层的浮动层插件


Posted in Javascript onSeptember 19, 2015

本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件。分享给大家供大家参考。具体如下:

这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口。默认不带样式,大家可以根据自己的项目写样式。弹出层代码很小,min版的只1.15k,因为小所以值得应用。希望有网友可以再改进,希望她变得更小。

运行效果截图如下:

jQuery实现点击按钮弹出可关闭层的浮动层插件

在线演示地址如下:

具体代码如下:

<!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>
<title>jquery实现可拖动弹出层特效</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function popWin(a){function n(){var a=k?k:document.body,b=a.scrollHeight>a.clientHeight?a.scrollHeight:a.clientHeight,c=a.scrollWidth>a.clientWidth?a.scrollWidth:a.clientWidth;$("#maskLayer").css({height:b,width:c})}var d,e,b=9e3,c=!1,f=$("#"+a),g=f.width(),h=f.height(),i=f.find(".tit"),j=f.find(".close"),k=document.documentElement,l=($(document).width()-f.width())/2,m=(k.clientHeight-f.height())/2;f.css({left:l,top:m,display:"block","z-index":b- -1}),i.mousedown(function(a){c=!0,d=a.pageX-parseInt(f.css("left")),e=a.pageY-parseInt(f.css("top")),f.css({"z-index":b- -1}).fadeTo(50,.5)}),i.mouseup(function(){c=!1,f.fadeTo("fast",1)}),$(document).mousemove(function(a){if(c){var b=a.pageX-d;0>=b&&(b=0),b=Math.min(k.clientWidth-g,b)-5;var i=a.pageY-e;0>=i&&(i=0),i=Math.min(k.clientHeight-h,i)-5,f.css({top:i,left:b})}}),j.live("click",function(){$(this).parent().parent().hide().siblings("#maskLayer").remove()}),$('<div id="maskLayer"></div>').appendTo("body").css({background:"#000",opacity:".4",top:0,left:0,position:"absolute",zIndex:"8000"}),n(),$(window).bind("resize",function(){n()}),$(document).keydown(function(a){27==a.keyCode&&($("#maskLayer").remove(),f.hide())})}
</script>
<style type="text/css">
body{margin:0; padding:0;font-size:12px;}
dt{padding:10px;}
p{ height:100px; line-height:100px; border:1px solid #eee; margin:10px; }
i{ font-style:normal;}
#detail{ position:absolute;width:400px;height:200px;border:1px solid #ccc;background:#efefef; display:none;}
#detail .tit{ background:#ddd; display:block; height:33px; cursor:move;}
#detail .tit i{ float:right; line-height:33px; padding:0 8px;cursor:default;}
#detail2{position:absolute;width:300px;height:100px;border:1px solid #555;background:#555;display:none;}
#detail2 .tit{ background:#333; display:block; height:33px;cursor:move;}
#detail2 .tit i{ float:right; line-height:33px; padding:0 8px; color:#777; cursor:default;}
</style>
</head>
<body>
<br /><br />
<center>
<dl>
<dt><button id="t1">点我弹一个</button></dt>
 <dt><button id="t2">点我再弹一个</button></dt>
</dl>
</center>
<div id="detail">
<div class="tit"><i class="close">关闭</i></div>
</div>
<div id="detail2">
<div class="tit"><i class="close">关闭</i></div>
再弹出一个窗
</div>
<script type="text/javascript">
 $("#t1").click(function(){
   popWin("detail");
 });
 $("#t2").click(function(){
   popWin("detail2");
 });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
Javascript创建类和对象详解
May 31 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 #Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 #Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 #Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 #Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 #Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 #Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
分享10段PHP常用代码
2015/11/11 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python实现网站表单提交和模板
2019/01/15 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
Nike香港官网:Nike HK
2019/03/23 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
分公司负责人任命书
2014/06/04 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
教师工作能力自我评价
2015/03/04 职场文书
教师聘用意向书
2015/05/11 职场文书
刑事法律意见书
2015/06/04 职场文书
回复函格式及范文
2015/07/14 职场文书