利用milo的弹窗

//css  确定按钮,关闭按钮都是用的小图

/*弹窗样式*/
    .pop {
        width: 460px;
        border-top: 2px solid #c22a24;
        background: #ededed;
        position: relative;
    }

    .pop .pop-con {
        position: relative;
        text-align: center;
        font-size: 16px;
        color: #505050;
        line-height: 24px;
        padding: 84px 5px 20px;
    }

    .pop .pop-con:before {
        display: block;
        content: '';
        width: 54px;
        height: 54px;
        background: url("/apply-spr.png") -308px -132px;
        position: absolute;
        left: 50%;
        top: 20px;
        margin-left: -27px;
    }

    .pop .close {
        display: block;
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 40px;
        color: #929292;
        text-decoration: none;
        font-size: 60px;
        background: url("/apply-spr.png") no-repeat -38px -40px;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
    }

    .pop .pop-btn {
        width: 100%;
        border-top: 1px solid #ddd;
        text-align: center;
        padding: 15px 0;
    }

    .pop .pop-btn a {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        width: 130px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        margin: 0 9px;
    }

    .pop .pop-btn a.enter {
        background: url("/apply-spr.png") no-repeat 0 -296px;
    }

    .pop .pop-btn a.back {
        background: url("/apply-spr.png") no-repeat -137px -296px;
    }
//html  弹窗的demo结构
 <div class="pop" id="Prompt2" style="display: none">
        <div class="pop-con">
            这是弹窗信息
        </div>
        <div class="pop-btn">
            <a href="javascript:closeDialog();" class="back">确认</a>
        </div>
        <a href="javascript:closeDialog();" class="close"></a>
    </div>
js

首先js要引入jquery,引入milo;


//弹出层事件


//弹窗
function TGDialogS(e) {
    need("biz.dialog-min", function(Dialog) {
        Dialog.show({
            id: e,
            bgcolor: '#000', //弹出“遮罩”的颜色,格式为"#FF6600",可修改,默认为"#fff"
            opacity: 50 //弹出“遮罩”的透明度,格式为{10-100},可选
        });
    });
}


//关闭弹窗
function closeDialog() {
    need("biz.dialog-min", function(Dialog) {
        Dialog.hide();
    });
}



调用:
//参数传入的是demo结构里面弹窗的id。 如果需要多个弹窗,样式各不相同,则在页面定义多个这样的弹窗就ok了

TGDialogS('Prompt2') ;

关闭弹窗: closeDialog()

猜你喜欢

转载自blog.csdn.net/dxj124/article/details/84618955