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 03 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
JS实现打砖块游戏
Feb 14 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
vue 内联样式style中的background用法说明
Aug 05 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
用来给图片加水印的PHP类
2008/04/09 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
js几个验证函数代码
2010/03/25 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Zabbix实现微信报警功能
2016/10/09 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
Why do we need Unit test
2013/01/03 面试题
EJB的角色和三个对象
2015/12/31 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书