popShow弹出层的使用（一）

刺骨的言语ヽ痛彻心扉 2021-09-12 08:42 307阅读 0赞

popShow弹出层

![1333618865_5798.jpg][]

**图1.1 弹出层效果**

**1、引入JS和CSS文件**

注意：这里需要引入JQuery库文件。

**2、编写HTML代码**

**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

附件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)

![1333619927_9101.gif][]

[1333618865_5798.jpg]: https://img-my.csdn.net/uploads/201204/05/1333618865_5798.jpg
[1333619927_9101.gif]: https://img-my.csdn.net/uploads/201204/05/1333619927_9101.gif