jQuery弹出层插件popShow用法示例

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程序设计有所帮助。