jQuery弹出层插件popShow用法示例

本文实例讲述了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 = $('<span></span>').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 span {

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用法示例 的全部内容, 来源链接: utcz.com/z/314196.html

回到顶部