//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()