本文实例讲述了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程序设计有所帮助。
