/*全屏遮罩
* 使用方法：
* 显示：TC.shadow.show();
* 隐藏：TC.shadow.hide();
* */
;(function(){
function addShadow( obj ) {
if(typeof obj !== "object"){
return false;
}
obj.show();
var $shadow = $( '#shadow' );
if ( !$shadow.length ) {
$shadow = $( '<section id="shadow" style="opacity: .8; 100%;height: 100%;position: fixed;top: 0;left: 0;" class="z-act-pop"></section>' );
$("body").append($shadow);
} else {
$shadow.css({
opacity:0.8,
display:"block"
});
}
var docH = $( document ).height(), winH = $( window ).height(), h = Math.max( docH, winH );
$shadow.height( h ).off( "click" ).on( "click", function( e ) {
e.preventDefault();
e.stopPropagation();
$shadow.fadeOut("fast");
obj.hide();
// 避免点击穿透到后面的元素
return false;
} );
return $shadow;
}
TC.shadow = TC.shadow || {
show : addShadow,
hide : function() {
$( '#shadow' ).fadeOut("fast");
return false;
}
};
})();
/*
* 信息提示浮层
* 使用方法：
* TC.shadow.show({
show:function(){
TC.mess.show({
info:"您本次的提现金额为：100元确认申请提现吗？",
url:"#"
});
},
hide:function(){
TC.mess.hide();
}
});
* info：弹窗主体的内容，url：点击确定时的链接，btnInfo：将确定按钮的文字换成其他文字
* 当仅传入info时，窗体只显示一个确定按钮。
* 点击确定、取消按钮时，函数返回true
*/
;(function(){
//弹窗信息提示
//info,url,btnInfo
function messShow(obj){
messHtml();//给页面添加弹出层的html
var docH = $( document ).height(), winH = $( window ).height(), hgh = Math.max( docH, winH );//获取窗口可视范围的高度
$("body").css("height",hgh+"px");
$("body").css("overflow","hidden");
if(obj.info){//弹出框的主体信息，当其为空时显示默认信息，不为空时赋值
$(".mess-content").text(obj.info);
}
if(obj.url === undefined || obj.url==""){//当url为空的时候，仅显示确定按钮
onlyShowSure();//仅显示确定一个按钮
}else{
$(".mess-btn .sure a").attr("href",obj.url);//当url存在的时候为确定按钮赋值
}
if(obj.btnInfo === "" || obj.btnInfo){//btnInfo为确定按钮传入的值。
if(obj.btnInfo == ""){
onlyShowSure();//仅显示确定一个按钮
}else{
$(".mess-btn .sure a").text(obj.btnInfo);//为确定按钮赋值
}
}
}
//给页面添加弹出层的html
function messHtml(){
var $messBox = $('#mess-box');
var $html = '<div id="mess-box">' +
'<div class="mess-content"></div>' +
'<div class="mess-btn">' +
'<ul>' +
'<li class="cancel"><a href="javaScript:;">取消</a><span>|</span></li>' +
'<li class="sure"><a href="javaScript:;">确定</a></li>' +
'</ul>' +
'</div>' +
'</div>';
if( !$messBox.length ){
$("body").append( $html );
}else{ $("#mess-box").css("display","block"); } $(".mess-btn .cancel").off("click",boxHide).on("click",boxHide); } //仅显示确定一个按钮 function onlyShowSure(){ $(".mess-btn .sure").off("click",boxHide).on("click",boxHide); $(".mess-btn li.sure").css("width","100%"); $(".mess-btn li.cancel").hide(); $(".mess-btn .sure span").hide(); } //隐藏弹出框 function boxHide(){ TC.shadow.hide(); $("#mess-box").hide(); $("body").removeAttr("style"); return true; } TC.mess = TC.mess || { show:messShow, hide:boxHide }})();
/*弹窗提示部分开始*/
#mess-box{
200px;
margin:200px auto 0;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
text-align:center;
background: #fff;
overflow: hidden;
z-index:999;
}
.mess-title{
}
.mess-content{
color:#928F8A;
line-height: 31px;
margin-top: 10px;
margin-bottom: 10px;
}
.mess-btn{
background:#ffda44;
float: left;
100%;
height: 25px;
line-height: 25px;
}
.mess-btn ul li{
50%;
float:left;
color:#000;
cursor: pointer;
}
.mess-btn ul li a:link,.mess-btn ul li a:visited,.mess-btn ul li a:hover,.mess-btn ul li a:active{
color:#000;
display: block;
float: left;
96%;
}
.mess-btn ul li span{
float:right;
}
/*弹窗提示部分结束*/