怎么在jQuery中使用popShow弹出层插件

怎么在jQuery中使用popShow弹出层插件？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

popShow弹出层

图1.1 弹出层效果

1、引入JS和CSS文件

<linkhref="popShow.css"rel="stylesheet"type="text/css"/>
<scriptsrc="/js/common/jquery.min.js"type="text/javascript"></script>
<scriptsrc="popShow.js"type="text/javascript"></script>

注意：这里需要引入jQuery库文件。

2、编写HTML代码

<divid="swinLogin">
<table>
<tr>
<th>用户名</th>
<td><inputid="txtUserName"type="text"/></td>
</tr>
<tr>
<th>密码</th>
<td><inputid="txtPsw"type="password"/></td>
</tr>
<tr>
<th></th>
<td><inputtype="button"value="登录"/></td>
</tr>
</table>
</div>

3、popShow的使用

(1) 打开弹出层

$("#swinLogin").popShow("用户登录");

(2) 关闭弹出层

$("#swinLogin").popHide();

附件

附件1：popShow.js

$.fn.popShow=function(title){
vartag=this;
$('<divclass=\"g-mask\"><iframeframeborder=\"0\"scrolling=\"no\"></iframe></div>').appendTo('body');
this.show().attr('par',this.parent().length?true:false).appendTo('body').wrapAll('<tableclass=\"g-popup\"><tr><td></td></tr></table>');
this.wrapAll('<divclass=\"g-popup-wrap\"style=\"width:'+this.outerWidth(true)+'px\"></div>').before('<divclass=\"g-popup-titleg-line-dashed\">'+(title?title:'')+'</div>').before($('<aclass=\"g-popup-hide\"href=\"javascript:;\"></a>').click(function(){
tag.popHide()
}));
returnthis
};
$.fn.popHide=function(){
vartab=this.closest('table');
this.attr('par')=='true'?this.hide().appendTo('body'):this.remove();
tab.prev().remove();
tab.remove();
returnthis
};

附件2：popShow.css

/*弹出层*/
.g-mask,.g-maskiframe,.g-popup{width:100%;height:100%;}
.g-mask{background:#fff;filter:alpha(opacity=80);opacity:0.8;}
.g-maskiframe{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:#E95A59solid4px;text-align:left;position:relative;margin:0auto;}
.g-popup-title{font-size:14px;height:28px;line-height:28px;overflow:hidden;margin-bottom:20px;font-weight:bold;color:#e25150;border-bottom:1pxdotted#AAAAAA}
.g-popup-hide{background:url("/images/popBtn.png")00no-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)));}

看完上述内容，你们掌握怎么在jQuery中使用popShow弹出层插件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！