jQuery弹出层插件popShow用法示例

本文实例讲述了jQuery弹出层插件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="display:none;"><div class="pWrap"><table class="g_form"><tr><th class="g-form-label"><span class="g-star">*</span>用户名</th><td><input id="txtUserName" type="text" /></td></tr><tr><th><span class="g-star">*</span>密码</th><td><input id="txtPsw" type="password" /></td></tr><tr><th></th><td><input type="button" value="登录" /></td></tr></table></div></div>

3、popShow的使用
（1）打开弹出层

popShow（{ title: "用户登录", ele: "#swinLogin", width: 468 }）;//打开弹出层

参数说明：
title: "用户登录", //标题
ele: "#divID", //目标id，必填
html: "<div><p>提交成功</p></div>", //支持html代码，若填写此项，ele可为空
width: 700, //非必填
hide: "#closeswin" //关闭按钮id，非必填
（2）关闭弹出层

popHide（）; //关闭弹出层

附件
附件1：popShow.js

function popShow（obt） {var wp = $（"<div id="g-popwin"></div>"）.appendTo（"body"）,ms = $（"<div class="g-popwin-mask"><iframe frameborder="0" scrolling="no"></iframe></div>"）.appendTo（wp）,tb = $（"<table class="g-popwin-box"></table>"）.appendTo（wp）,tr = $（"<tr></tr>"）.appendTo（tb）,td = $（"<td></td>"）.appendTo（tr）,bx = $（"<div class="g_popwin" style="margin:0 auto; width:700px;"></div>"）.appendTo（td）,ba = $（"<div class="tit"></div>"）.appendTo（bx）,rb = $（"<b class="g-f-r"></b>"）.appendTo（ba）,hd = $（"<a class="close g-f-r" title="点击关闭"></a>"）.appendTo（ba）,st = $（"<strong></strong>"）.appendTo（ba）,cn = $（"<div class="con"></div>"）.appendTo（bx）,ss;if （obt.ele） {ss = $（obt.ele）.show（）.appendTo（cn）} else if （obt.html） {cn.append（obt.html）}if （obt.width） {bx.width（obt.width）}if （obt.height） {bx.height（obt.height）}if （obt.title） {st.text（obt.title）}else { ba.hide（） }hd.add（obt.hide || "#swin_hide"）.click（function（） {popHide（）;}）;window.popHide = function（） {if （obt.ele） {ss.hide（）.appendTo（"body"）}wp.remove（）};}

附件2：popShow.css

#g-popwin, .g-popwin-mask, .g-popwin-mask iframe, .g-popwin-box {height: 100%;width: 100%;}.g-popwin-mask, .g-popwin-box {left: 0;position: fixed;top: 0;z-index: 100;}.g-popwin-mask {background: none repeat scroll 0 0 #000000;opacity: 0.3;}.g-popwin-mask iframe {opacity: 0;}.g_popwin {background-color: #FFFFFF;border: 1px solid #C6C6C6;}.g_popwin .tit .close {background: url（"/images/swinclose.gif"） no-repeat scroll 0 0 transparent;cursor: pointer;height: 14px;margin-top: 8px;width: 14px;}.g_popwin .tit b {display: block;height: 30px;width: 10px;}.g_popwin .tit{background: none no-repeat scroll 0 0 #f2f2f2;border-bottom: 1px solid #C6C6C6;height: 30px;line-height: 30px;overflow: hidden;padding: 0 10px;font: 12px/1.5em Arial,Tahoma;color: #111111;line-height:30px;}.g_popwin .tit strong {display: block;height: 27px;width: 220px;}.g-f-r{float:right;}

附件3：关闭按钮图标（swinclose.gif）

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。