本文实例讲述了jQuery弹出层插件popShow(改进版)用法。分享给大家供大家参考，具体如下：

前面一篇《jQuery弹出层插件popShow用法示例》 分析了popShow插件的基本用法，这里再对插件进行一番改进。

popShow弹出层

图1.1 弹出层效果

1、引入射流研究…和半铸钢钢性铸铁(铸造半钢)文件

链接href='popShow.css' rel='样式表type=' text/CSS '/script src=' http :/js/common/jquery。量滴js ' type=' text/JavaScript '/script script src=' http : pop show。js ' type=' text/JavaScript '/script注意：这里需要引入jQuery库文件。

2、编写超文本标记语言代码

div id=' SwinLogon ' style=' width :230 px；display:none '表tr th用户名/th TD输入id=' Txtusername ' type=' text '/TD/tr/tr th密码/th TD输入id=' TxTPsw '类型='密码'/TD/tr th/th TD输入类型='按钮'值='登录//td /tr /table/div3、popShow的使用

(1) 打开弹出层

$(' # SwinLogon ').popShow('用户登录');(2) 关闭弹出层

$(' # SwinLogon ').popHide()；附件

附件1:popShow.js

$ .fn。pop show=function(title){ var tag=this；$(' div class= ' g-mask ' iframe框架边框= ' 0 '滚动= ' no '/iframe/div ').appendo(' body ')；this.show().attr('par '，this.parent().长度？真：假)。appendTo("正文")。全部换行(' table class= ' g-popup ' trtd/TD/tr/table ')；这个。全部换行(' div class= ' g-popup-wrap ' style= ' width : ' this。outwidth(true)' px '/div ').在(' div class= ' g-popup-title g-line-虚线 ')之前(标题？标题： '') '/div ').在($(' a class= ' g-popup-hide ' href= ' JavaScript :'/a ').单击(function(){ tag。pop hide()})；返回此};$ .fn。pophide=function(){ var tab=this。closer(' table ')；this.attr('par')=='true '？this.hide().appendo("body"):这个。移除()；tab.prev().移除();选项卡。移除()；返回此};附件2:popShow.css

/*弹出层*/.面具g-mask iframe .g-popup {宽度：100%；高度：100%;}.g掩码{ background : # ffffilter : alpha(不透明度=80);opacity:0.8 }。g-mask iframe { filter:alpha(不透明度=0);opacity:0 }。面具g-popup {位置：固定；top:0left:0z指数：10000;_ position : absolute _ top :表达式(文档元素。滚动顶部“px”)；}.g-黑色-遮罩{背景： # 000；opacity:0.7 }。g-black-popup {位置：绝对；}.g-popup { text-align : center；}.g-popup-wrap { padd :30 px；背景# fffborder:#E95A59实心4延伸文本-向左对齐：位置：相对；margin:0 auto}。g-popup-title { font-size :14 px；高度：28 px行高：28 px飞越：隐藏；边距-底部：20 px字体粗细：加粗；color: # e25150边框-底部：1px虚线# AAA } .g-popup-hide { background : URL('/images/pop BTN。png ')0 0不重复；宽度：34 px高度：30 px显示：块；位置：绝对；右right:5pxtop:5pxz索引：99;}.g-popup-hide :悬停{背景-位置：0-40px；}.g-info-hide { width :34 px；高度：30 px显示：块；位置：绝对；背景-位置：0-1320像素；top:5pxright:5px}。g-info-hide :悬停{背景-位置：0-1360 px；}.g-popup-tip { height : 0；飞越：隐藏；位置：固定；z索引：10001;底部： 0；右： 0；_position:绝对值；_ bottom: auto_top:表达式(评估(文档。文档元素。滚动顶部文档。文档元素。客户身高-这个。偏置thight-(parsent(this。当前样式。页边距顶部，10)| | 0)-(parsent(this。当前样式。边距底部，10)| | 0))；}附件3:关闭按钮图标(popBtn.png)

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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