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

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

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;}








点我弹一个
 
点我再弹一个



关闭


关闭
再弹出一个窗

希望本文所述对大家的jQuery程序设计有所帮助。