本文實例講述了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" >
<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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
