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)