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制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
一篇文章学会Vue中间件管道
Jun 20 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
php mysql数据库操作分页类
2008/06/04 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php排序算法实例分析
2016/10/17 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
小程序实现录音功能
2020/09/22 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
使用python实现多维数据降维操作
2020/02/24 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
三月学雷锋活动总结
2014/06/26 职场文书
项目申请汇报材料
2014/08/16 职场文书
学校端午节活动方案
2014/08/23 职场文书
2016入党心得体会范文
2016/01/06 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书