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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现的浮动层div浏览器居中显示效果

    jQuery实现的浮动层div浏览器居中显示效果

    本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script> 2.在页面的head中加入浮动层和遮罩层的样式 <style> #previewDiv{z-ind

  • jQuery实现可拖动的浮动层完整代码

    以下是使用jQuery实现可拖动的浮动层的完整代码,复制保存到html文件就可以体验效果.也可以访问以下网址体验效果:http://www.keleyi.com/keleyi/phtml/dragdiv.htm 光标移动到层上,按住鼠标就可以拖动层. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

  • jquery简单的弹出层浮动层代码

    jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln

  • jQuery实现的兼容性浮动层示例

    jQuery实现的兼容性浮动层示例

    本文实例讲述了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

  • jQuery页面滚动浮动层智能定位实例代码

    HTML代码: 复制代码 代码如下: <div class="float" id="float"> 我是个腼腆羞涩的浮动层... </div> JS代码: 复制代码 代码如下: $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position&q

  • 基于jquery的浮动层效果代码

    本浮动层基于jQuery1.6.2,对于研究1.6版本的jquery很有帮助意义. jquery浮动层 #Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;} $(document).ready(function(){ $(window).scroll(function (){ var offsetTop = $(window).scrollTop()

  • jQuery实现浮动层随浏览器滚动条滚动的方法

    jQuery实现浮动层随浏览器滚动条滚动的方法

    本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法.分享给大家供大家参考.具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • jQuery powerFloat万能浮动层下拉层插件使用介绍

    jQuery powerFloat万能浮动层下拉层插件使用介绍

    一.写插件的缘由 为什么想写此插件,想来想去,归结为一个字:"懒".不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春.于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了.这种感觉就好比<大话西游>里悟空一巴掌拍死唐僧这只苍蝇一样.那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等). 二.插件概述 插件名为jque

  • JQuery浮动DIV提示信息并自动隐藏的代码

    复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击

  • 基于JQuery的浮动DIV显示提示信息并自动隐藏

    复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击

  • jQuery实现div浮动层跟随页面滚动效果

    复制代码 代码如下: <!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> <meta http-equiv=&qu

随机推荐