M端錯誤提醒 -- pop 使用

JS:

window.pop = {
/*alert提示框
*@param title 提示的標題
*@param desc 提示的描述
*@param btnNum 按鈕的數量，假如爲1，則無視e2，t2，l2參數
*@param e1 第一個按鈕的類型，0爲關閉類型，1爲連接類型
*@param t1 第一個按鈕的顯示文字
*@param l1 第一個按鈕的連接，若是該按鈕爲關閉類型，此處填0，連接類型填寫該按鈕連接
*@param e2 第二個按鈕的類型，0爲關閉類型，1爲連接類型
*@param t2 第二個按鈕的顯示文字
*@param l2 第二個按鈕的連接，若是該按鈕爲關閉類型，此處填0，連接類型填寫該按鈕連接
*/
alert: function(title, desc, btnNum, e1, t1, l1, e2, t2, l2) {

/*initialize main dom*/
var _body = $('body');
var popShadow = $('<div class="shadow"></div>');
var popWrap = $('<div class="pop-wrap"></div>');
var popContent = $('<div class="pop-content"></div>')
.html('<p class="pop-title">' + title + '</p><p class="pop-describe">' + desc + '</p>')
.appendTo(popWrap);

var popButtonBox = $('<div class="pop-button-box"></div>');
var typeClass = (btnNum == 1) ? 'pop-button-single' : 'pop-button-double'

var btnNum = parseInt(btnNum);//get button's number
var buttonData = [[e1, t1, l1], [e2, t2, l2]];//save data to array

/*loop append buttons to pop-button-box*/
for (var i = 0; i < btnNum; i++) {
if(parseInt(buttonData[i][0]) == 0){
popButtonBox.append(closeDom(buttonData[i][1]));
}else{
popButtonBox.append(linkDom(buttonData[i][1], buttonData[i][2]));
}
};

/*create the close type dom
*@return dom
*/
function closeDom (text) {
return $('<span class="pop-button pop-button-close ' + typeClass + '">' + text + '</span>').bind('click', closeFun);
}

/*create the link type dom
*@return dom
*/
function linkDom (text, link) {
return $('<a class="pop-button pop-button-close ' + typeClass + '" href="' + link + '">' + text + '</a>');
}

/*close pop function*/
function closeFun () {
popShadow.remove();
popWrap.remove();
}

/*append pop to document*/
popShadow.appendTo(_body).fadeIn('fast');
popWrap.append(popButtonBox).appendTo(_body).fadeIn('fast');
popOffset(popWrap);
},

/*確認提示
*@param title 確認提示標題
*@param desc 確認提示描述
*@param fn 確認後回調函數
*/
confirm: function(title, desc, fn) {

var _body = $('body');
var popShadow = $('<div class="shadow"></div>');
var popWrap = $('<div class="pop-wrap"></div>');
var popContent = $('<div class="pop-content"></div>')
.html('<p class="pop-title">' + title + '</p><p class="pop-describe">' + desc + '</p>')
.appendTo(popWrap);

var popButtonBox = $('<div class="pop-button-box"></div>');

var closeBtnDom = $('<span class="pop-button pop-button-close pop-button-double">取消</span>')
.on('click', function(){
popShadow.remove();
popWrap.remove();
})
.appendTo(popButtonBox);

var isFn = typeof fn === 'function';
if (isFn) {
var fnBtnDom = $('<span class="pop-button pop-button-close pop-button-double">肯定</span>')
.on('click', fn)
.on('click', function(){
popShadow.remove();
popWrap.remove();
})
.appendTo(popButtonBox);
};

popButtonBox.appendTo(popWrap);

/*append pop to document*/
popShadow.appendTo(_body).fadeIn('fast');
popWrap.appendTo(_body).fadeIn('fast');
popOffset(popWrap);
},

/*錯誤信息提示
*@param text 錯誤信息文本
*@param sec 錯誤信息顯示時間，單位毫秒，選填，不填則默認3秒
*/
error: function (text, sec, fn) {
var _body = $('body');
var popError = $('<div class="pop-wrap-error">' + text + '</div>');
$('.pop-wrap-error').remove();
popError.appendTo(_body).fadeIn('fast');
popOffsetX(popError);
sec = sec ? sec : 3000;
setTimeout(function() {
popError.fadeOut('fast',function() {
popError.remove();
});
if (typeof fn == 'function') fn()
},sec);
},

/*loading信息提示
*@param text 讀取中提示信息
*/
loading: function (text) {
var _body = $('body');
var popLoading = $('<div class="pop-loading"></div>');
var popContent = $('<p>' + text + '</p>');
var popLoadingEffect = $('<div class="pop-loading-effect"><i class="bounce1"></i><i class="bounce2"></i><i class="bounce3"></i><i class="bounce4"></i><i class="bounce5"></i><i class="bounce6"></i></div>');

popLoading.append(popContent).append(popLoadingEffect).appendTo(_body).fadeIn('fast');
popOffset(popLoading);
},

/*tips信息提示
*@param text 提示信息，強調部分請用strong標籤包裹
*/
tips: function () {
var _body = $('body');
var allTips = $('.icon-question-circle');//選取頁面中全部問號圖標
allTips.each(function(index, el) {//遍歷全部問號圖標
var _this = $(this);
var text = _this.data('pop-tips');//獲取當前tip的文案
_this.on('touchstart', function(){//爲此圖標綁定事件
$('.pop-tips').remove();
var popTips = $('<div class="pop-tips"></div>');
var popContent = $('<p><span>' + text + '</span></p>');
popTips.append(popContent).appendTo(_body);
var arrThisOffset = getElementOffset(_this);//得到此圖標的距離頁面頂端的距離和左邊的距離
var arrTipOffset = [popTips.width(),popTips.height()]//得到tip的寬高
var tipFinalOffset = [
arrThisOffset[0] - (arrTipOffset[0]/2) + (_this.width()/2),//圖標上偏移距離-tip高度的通常
arrThisOffset[1] - arrTipOffset[1] - 10//圖標左偏移距離-tip寬度的通常+圖標寬度的一半
];
popTips.css({
'left': tipFinalOffset[0],
'top': tipFinalOffset[1] - 5
});
popTips.fadeIn('fast').animate({'top': tipFinalOffset[1],'opacity':1}, 200);
setTimeout(function(){
popTips.remove();
}, 3000)
})
});
},

/*
*清除全部pop彈層
*/
remove: function () {
$('.shadow, .pop-wrap, .pop-wrap-error, .pop-loading').remove();
}

};
/*
*修正元素的定位，使之絕對定位於頁面中間
*@param e 目標元素
*/
function popOffset (e){
var popHeight = e.height();
var popWidth = e.outerWidth();
e.css({'margin-top': -popHeight / 2, 'margin-left': -popWidth / 2});
}
/*
*修正元素的X軸定位，使之X軸絕對定位於頁面中間
*@param e 目標元素
*/
function popOffsetX (e){
var popWidth = e.outerWidth();
e.css({'margin-left': -popWidth / 2});
}
/*
*返回元素距離頁面頂端的距離和左邊的距離
*@param e 目標元素
*@return array [左邊距，頂邊距]
*/
function getElementOffset(e){
return [e.offset().left,e.offset().top];
}
//渲染時初始化
$(function(){
if ($('.icon-question-circle').length > 0) {//按需加載
pop.tips();
};
})

 

CSS：

.pop-wrap{ position: fixed; left: 50%; top: 50%; z-index: 102; width: 80%; margin-left: -40%; background: #fff; border-radius: 10px; text-align: center; display: none;}.pop-wrap .pop-content{ margin: 20px 20px 0; border-bottom: 1px solid #ccc;}.pop-wrap .pop-content .pop-title{ font-size: 15px; color: #333; margin-bottom: 10px;}.pop-wrap .pop-content .pop-describe{ font-size: 13px; color: #666; margin-bottom: 10px;}.pop-wrap .pop-content .pop-describe b{ color: #f90;}.pop-wrap .pop-button-box{ overflow: hidden;}.pop-wrap .pop-button-box .pop-button{ float: left; margin: 10px 0; font-size: 17px; color: #808;}.pop-wrap .pop-button-box .pop-button-single{ width: 100%;}.pop-wrap .pop-button-box .pop-button-double{ width: 50%; border-left: 1px solid #ccc; margin-left: -1px;}