本文实例讲述了jQuery弹出层插件popShow(改进版)用法。分享给大家供大家参考，具体如下：
前面一篇《jQuery弹出层插件popShow用法示例》分析了popShow插件的基本用法，这里再对插件进行一番改进。
popShow弹出层
图1.1 弹出层效果
1、引入JS和CSS文件
<link href="popShow.css" rel="stylesheet" type="text/css" /><script src="/js/common/jquery.min.js" type="text/javascript"></script><script src="popShow.js" type="text/javascript"></script>
注意：这里需要引入jQuery库文件。
2、编写HTML代码
<div id="swinLogin" style="width:230px;
display:none;
"> <table> <tr> <th>用户名</th> <td><input id="txtUserName" type="text" /></td> </tr> <tr> <th>密码</th> <td><input id="txtPsw" type="password" /></td> </tr> <tr> <th></th> <td><input type="button" value="登录" /></td> </tr> </table></div>
3、popShow的使用
(1) 打开弹出层
$("#swinLogin").popShow("用户登录");
(2) 关闭弹出层
$("#swinLogin").popHide();
附件
附件1：popShow.js
$.fn.popShow = function(title) {
var tag = this;
$('<div class="g-mask"><iframe frameborder="0" scrolling="no"></iframe></div>').appendTo('body');
this.show().attr('par', this.parent().length ? true : false).appendTo('body').wrapAll('<table class="g-popup"><tr><td></td></tr></table>');
this.wrapAll('<div class="g-popup-wrap" style="width:' + this.outerWidth(true) + 'px"></div>').before('<div class="g-popup-title g-line-dashed">' + (title ? title : '') + '</div>').before($('<a class="g-popup-hide" href="javascript：;
"></a>').click(function() {
tag.popHide() }
));
return this}
;
$.fn.popHide = function() {
var tab = this.closest('table');
this.attr('par') == 'true' ? this.hide().appendTo('body') : this.remove();
tab.prev().remove();
tab.remove();
return this}
;
附件2：popShow.css
/*弹出层*/.g-mask, .g-mask iframe, .g-popup {
width:100%;
height:100%;
}
.g-mask {
background:#fff;
filter:alpha(opacity=80);
opacity:0.8;
}
.g-mask iframe {
filter:alpha(opacity=0);
opacity:0;
}
.g-mask, .g-popup {
position:fixed;
top:0;
left:0;
z-index:10000;
_position:absolute;
_top:expression(documentElement.scrollTop + "px");
}
.g-black-mask {
background:#000;
opacity:0.7;
}
.g-black-popup{
position:absolute;
}
.g-popup {
text-align:center;
}
.g-popup-wrap {
padding:30px;
background:#fff;
border:#E95A59 solid 4px;
text-align:left;
position:relative;
margin:0 auto;
}
.g-popup-title {
font-size:14px;
height:28px;
line-height:28px;
overflow:hidden;
margin-bottom:20px;
font-weight:bold;
color:#e25150;
border-bottom:1px dotted #AAAAAA}
.g-popup-hide {
background:url("/images/popBtn.png") 0 0 no-repeat;
width:34px;
height:30px;
display:block;
position:absolute;
right:5px;
top:5px;
z-index:99;
}
.g-popup-hide:hover {
background-position:0 -40px;
}
.g-info-hide {
width:34px;
height:30px;
display:block;
position:absolute;
background-position:0 -1320px;
top:5px;
right:5px;
}
.g-info-hide:hover {
background-position:0 -1360px;
}
.g-popup-tip {
height: 0;
overflow: hidden;
position: fixed;
z-index:10001;
bottom: 0;
right: 0;
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop, 10) || 0) - (parseInt(this.currentStyle.marginBottom, 10) || 0)));
}
附件3：关闭按钮图标(popBtn.png)
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
