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 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
详解vue组件基础
May 04 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
js实现打字小游戏
Dec 17 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
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
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
详解python的数字类型变量与其方法
2016/11/20 Python
OpenCV实现人脸识别
2017/04/07 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python怎么判断模块安装完成
2020/06/19 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
2014年两会学习心得体会
2014/03/10 职场文书
留学推荐信范文
2014/05/10 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
债务纠纷代理词
2015/05/25 职场文书
学校运动会通讯稿
2015/07/18 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
Redis实现订单过期删除的方法步骤
2022/06/05 Redis
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技