<link href="popShow.css" 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> <div> <table> <tr> <th><span>*</span>用户名</th> <td><input type="text" /></td> </tr> <tr> <th><span>*</span>密码</th> <td><input 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></div>').appendTo('body'), ms = $('<div><iframe frameborder="0" scrolling="no"></iframe></div>').appendTo(wp), tb = $('<table></table>').appendTo(wp), tr = $('<tr></tr>').appendTo(tb), td = $('<td></td>').appendTo(tr), bx = $('<div></div>').appendTo(td), ba = $('<div></div>').appendTo(bx), rb = $('<b></b>').appendTo(ba), hd = $('<a title="点击关闭"></a>').appendTo(ba), st = $('<strong></strong>').appendTo(ba), cn = $('<div></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程序设计有所帮助。

jQuery弹出层插件popShow(改进版)用法示例

[8384]

本文实例讲述了jQuery弹出层插件popShow(改进版)用法。分享给大家供大家参考，具体如下：

前面一篇《jQuery弹出层插件popShow用法示例》分析了popShow插件的基本用法，这里再对插件进行一番改进。

popShow弹出层

图1.1 弹出层效果

1、引入JS和CSS文件