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

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

popShow弹出层

图1.1 弹出层效果

1、引入JS和CSS文件



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

2、编写HTML代码


用户名
密码

3、popShow的使用

(1) 打开弹出层

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

(2) 关闭弹出层

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

附件

附件1:popShow.js

$.fn.popShow=function(title){
vartag=this;
$('
').appendTo('body'); this.show().attr('par',this.parent().length?true:false).appendTo('body').wrapAll(''); this.wrapAll('
').before(''+(title?title:'')+'
').before($('').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弹出层插件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注恰卡编程网行业资讯频道,感谢各位的阅读!

发布于 2021-04-03 22:31:25
分享
海报
170
上一篇:如何在javascript中使用闭包 下一篇:echarts插件如何在jQuery中使用
目录

推荐阅读

忘记密码?

图形验证码