本文实例讲述了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),
