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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlejquery实现可拖动弹出层特效/title脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript '函数pop win(a){ function n(){ var a=k？k:document.body，b=a.scrollHeighta.clientHeight？a .滚动高度： a .客户端高度，c=a.scrollWidtha.clientWidth？a . scrollwidth : a .客户端宽度；$('#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 .客户端高度-f . height())/2；f.css({left:l，top:m，display:'block '，' z-index ' : B- 1 })，i.mousedown(函数(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).鼠标移动(函数(a){ if(c){ var b=a .第x-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).父项()。父项()。隐藏()。兄弟姐妹(' #maskLayer ').remove()})，$('div id='maskLayer'/div ').appendTo("正文")。css({background:'#000 '，opacity: ' .4 '，top:0，left:0，position:'absolute '，zIndex:'8000'})，n()，$(window).bind('resize '，function(){n()})，$(document).向下键(函数(a){27==a.keyCode($('#maskLayer ').remove()、f . hide())})}/script style type=' text/CSS ' body { margin :0；划水：0;font-size :12 px} dt { padd :10 px } p { height :100 px线高：100 pxborder:1px固体# eee margin :10 px } I { font-style : normal；} # detail { position : absolute；宽度宽度：400像素高度：200 pxborder:1px固体# ccc背景# efefefdisplay:none } #详细信息tit { background: # ddd显示：块；height :33 xcursor : move } #详细信息titi { float : right线高：33 pxpadd :0 8pxcursor : default } # detail 2 {位置：绝对值；宽度宽度：300像素高度：100 pxborder:1px固体# 555;背景： # 555;display:none} #详细信息2。tit { background: # 333显示：块；height :33 xcursor : move } #详细信息2。titi { float : right线高：33 pxpadd :0 8pxcolor : # 777 cursor : default }/style/head dybr/br/centerdldtbutton id=' t1 '点我弹一个/button/dt dtbutton id='t2 '点我再弹一个/button/dt/dl/center div id=' detail ' div class=' tit ' I class=' close '关闭/I/div/div id=' detail 2 ' div class=' tit ' I class=' close '关闭/i/div再弹出一个窗/div脚本类型=' text/JavaScript ' $(' # t1 ').单击(function(){ popWin(' detail '))；});$('#t2 ').click(function(){ popWin(' detail 2 '))；});/script div style=' text-align : center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。