一个js不错的手机端弹出框
29 June 2016
注意：使用前必需引入 jquery
使用demo如下
// 弹出
myc.showProgress({
title : '支付中...'
})
// 关闭
myc.hideProgress();
// 弹出 样式二
myc.toast({
msg : "请在微信打开页面"
})
详情代码如下
var _debug = false;
var showBonus = false;
var serverUrl = "/";
//var serverUrl = "http://taomei.in/";
//var serverUrl = "http://192.168.1.106/";
//var serverUrl = "http://192.168.1.102:8080/";
//var serverUrl = "http://localhost/";
if (_debug) {
window.onerror = function (message, url, line) {
alert('Error at line ' + line + ': ' + JSON.stringify(message));
};
}
var my = (function() { //依赖于jquery
function web_get(url) {
var sid = localStorage.getItem('_sid_');
if (url.indexOf('_sid_=') < 0) {
if (url.indexOf('?') >= 0) {
url += '&_sid_=' + sid;
}
else {
url += '?_sid_' + sid;
}
}
return url;
}
function web_post(data) {
if (!data) data = {};
data._sid_ = localStorage.getItem('_sid_');
return data;
}
function web_res(data) {
if (data._sid_) {
localStorage.setItem('_sid_', data._sid_);
}
}
function ajaxGet(url, callback) {
$.ajax({
type:"GET",
url: web_get(url),
async:true,
success : function(data, status, xhr){
web_res(data);
if (callback) callback(data, null, status);
},
error : function(xhr, status, err){
if (callback) callback(null, err, status);
}
});
}
function ajaxPost(url, data, callback) {
$.ajax({
type:"POST",
url: url,
data: web_post(data),
async:true,
success : function(data, status, xhr){
web_res(data);
if (callback) callback(data, null, status);
},
error : function(xhr, status, err){
if (callback) callback(null, err, status);
}
});
}
return {
ajaxGet: ajaxGet,
ajaxPost: ajaxPost
};
})();
var myc = (function(){
//定时器
function repeat(f, t, c) {
var count = 0;
return setTimeout(function() {
if (f(++count) === false) return;
else if (c && count >= c) return;
else setTimeout(arguments.callee, t);
}, t);
}
//检查是否登录
function check_login(){
confirm({
msg : '您还没登录，直接去登录？'
},function(ret,err){
if(ret){
if(ret.buttonIndex == 1){
myc.location('login.html');
}else{
return false;
}
}
})
}
//获取url传递参数
function getRequest() {
var url = window.location.search; //获取url中"?"符后的字串
var theRequest = new Object;
if (url) {
var str = url.substr(1);
if(str.indexOf('&') > -1){
str = str.split("&");
for(var i = 0; i < str.length; i ++) {
theRequest[str[i].split("=")[0]] = (str[i].split("=")[1]);
}
}else{
theRequest[str.split("=")[0]] = (str.split("=")[1]);
}
return theRequest;
}else{
return null;
}
}
//跳转到指定页面
function location(url){
window.location.href = url;
}
//跳转到指定页面 history.go(number|URL)
function go(url){
window.history.go(url);
}
//上一个 URL
function back(){
window.history.back();
}
//下一个 URL
function forward(){
window.history.forward();
}
//登录成功后保存个人信息到本地
function login (data){
if(typeof data == 'object'){
localStorage.setItem('mycLogin',JSON.stringify(data));
}else{
localStorage.setItem('mycLogin',data);
}
}
//获取自己id
function uid(){
var mycLogin = localStorage.getItem('mycLogin');
if(mycLogin){
mycLogin = JSON.parse(mycLogin);
if(mycLogin.id){
return mycLogin.id;
}else{
return 0;
}
}else{
return 0;
}
}
//清除个人信息
function clearLogin(){
localStorage.setItem('mycLogin','');
}
// alert(11)
//弹出框
function alert(obj,callback){
var title = obj.title || '提示';
var msg = obj.msg || '';
if(obj.buttons){
var buttons = obj.buttons;
}else{
var buttons = ['确定'];
}
if(document.getElementById("alertbackground")){
document.getElementById("alertbackground").style.display = 'block';
document.getElementById("alertContainer").style.display = 'block';
}else{
var html = '<div id="alertbackground" style="position: fixed;left: 0;top: 0px;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index:9999999"></div><div id="alertContainer" style="position: fixed;left: 50%;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);width: 300px;height: auto;z-index: 9999999;background-color: #fff;text-align: center;border-radius: 7px;"><div id="alertTitle" style="height: 40px;line-height: 40px;color: #45c01a;font-size: 18px;border-bottom: 1px solid #45c01a;"></div><div id="alertMsg" style="min-height: 50px;padding: 10px;word-break:break-all;word-wrap:break-word;"></div><div id="alertBtnContainer" style="position: relative;height: 40px;line-height: 40px;border-top: 1px solid #e1e1e1;"></div></div>';
document.body.insertAdjacentHTML('beforeEnd', html);
}
document.getElementById("alertTitle").innerHTML = title;
document.getElementById("alertMsg").innerHTML = msg;
var btnStyle = '<div style="position: absolute;left: 0;width: 100%;">'+ buttons[0];
document.getElementById("alertBtnContainer").innerHTML = btnStyle;
var divs = document.getElementById("alertBtnContainer").querySelectorAll('div');
for(var i = 0; i < divs.length; i++){
divs[i].addEventListener('click',function(){
if(callback && typeof(callback) == 'function'){
callback();
alertHide();
}else{
alertHide();
}
},false);
}
document.getElementById("alertbackground").addEventListener('click',function(){
event.stopPropagation();
event.preventDefault();
alertHide();
},false);
function alertHide(){
document.getElementById("alertbackground").style.display = 'none';
document.getElementById("alertContainer").style.display = 'none';
}
}
//弹出带两个或三个按钮的confirm对话框
function confirm(obj,callback){
var title = obj.title || '提示';
var msg = obj.msg || '';
if(obj.buttons){
if(obj.buttons.length == 1){
var buttons = [obj.buttons[0], '取消'];
}else{
var buttons = obj.buttons;
}
}else{
var buttons = ['确定', '取消'];
}
if(document.getElementById("confirmbackground")){
document.getElementById("confirmbackground").style.display = 'block';
document.getElementById("confirmContainer").style.display = 'block';
}else{
var html = '<div id="confirmbackground" style="position: fixed;left: 0;top: 0px;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);z-index:9999999"></div><div id="confirmContainer" style="position: fixed;left: 50%;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);width: 300px;height: auto;z-index: 9999999;background-color: #fff;text-align: center;border-radius: 7px;"><div id="confirmTitle" style="height: 40px;line-height: 40px;color: #45c01a;font-size: 18px;border-bottom: 1px solid #45c01a;"></div><div id="confirmMsg" style="min-height: 50px;padding: 10px;word-break:break-all;word-wrap:break-word;"></div><div id="confirmBtnContainer" style="position: relative;height: 40px;line-height: 40px;border-top: 1px solid #e1e1e1;"></div></div>';
document.body.insertAdjacentHTML('beforeEnd', html);
}
document.getElementById("confirmTitle").innerHTML = title;
document.getElementById("confirmMsg").innerHTML = msg;
if(buttons.length <= 2){
var btnStyle = '<div style="position: absolute;left: 0;width: 50%;border-right: 1px solid #e1e1e1;">'+ buttons[0] +'</div><div style="position: absolute;right: 0;width: 50%;">'+ buttons[1] +'</div>';
document.getElementById("confirmBtnContainer").innerHTML = btnStyle;
}else{
var btnStyle = '<div style="position: absolute;left: 0;width: 33.3%;border-right: 1px solid #e1e1e1;">'+ buttons[0] +'</div><div style="position: absolute;left:33.3%;width: 33.3%;border-right: 1px solid #e1e1e1;">'+ buttons[1] +'</div><div style="position: absolute;right: 0;width: 33.3%;">' + buttons[2] + '</div>';
document.getElementById("confirmBtnContainer").innerHTML = btnStyle;
}
var divs = document.getElementById("confirmBtnContainer").querySelectorAll('div');
for(var i = 0; i < divs.length; i++){
divs[i].setAttribute('index',i);
divs[i].addEventListener('click',function(){
var index = ~~this.getAttribute('index') + 1;
if(callback && typeof(callback) == 'function'){
callback({buttonIndex : index});
confirmHide();
}
},false);
}
document.getElementById("confirmbackground").addEventListener('click',function(){
confirmHide();
},false);
document.getElementById("confirmbackground").addEventListener('click',function(){
event.stopPropagation();
event.preventDefault();
},false);
function confirmHide(){
document.getElementById("confirmbackground").style.display = 'none';
document.getElementById("confirmContainer").style.display = 'none';
}
}
//吐丝
var toastTimer = null;
function toast(obj){
if(document.getElementById("toastContainer")){
document.body.removeChild(document.getElementById("toastContainer"));
}
if(obj.location == 'top'){
var duration = 'top:20px;';
var translate = '-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);';
}else if(obj.location == 'middle'){
var duration = 'top:50%;';
var translate = '-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);';
}else{
var duration = 'bottom:20px;';
var translate = '-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);';
}
var seed = (obj.duration / 1000) || 2;
var location = '-webkit-animation: toastFrames 1s '+ seed +'s forwards;-moz-animation: toastFrames 1s'+ seed +'s forwards;-ms-animation: toastFrames 1s '+ seed +'s forwards;-o-animation: toastFrames 1s forwards'+ seed +'s;animation: toastFrames 1s ' + seed + 's forwards;';
var style = '<style>@-webkit-keyframes toastFrames{from{opacity: 1;}to{opacity: 0;display:none;}}@-moz-keyframes toastFrames{from{opacity: 1;}to{opacity: 0;display:none;}}@-o-keyframes toastFrames{from{opacity: 1;}to{opacity: 0;display:none;}}@-ms-keyframes toastFrames{from{opacity: 1;}to{opacity: 0;display:none;}}</style>';
var html = style + '<div id="toastContainer" style="position: fixed;'+ duration +'left: 50%; width: 100%;z-index: 9999999;text-align: center;'+ translate + location +'"><span style="display: inline-block; max-width: 80%;padding: 10px 20px;border-radius: 7px;word-break:break-all;word-wrap:break-word;background-color: rgba(0,0,0,0.5);color: #fff;" id="toastText"></span></div>';
document.body.insertAdjacentHTML('beforeEnd', html);
document.getElementById("toastText").innerText = obj.msg;
document.getElementById("toastContainer").addEventListener('touchmove',function(){
event.stopPropagation();
event.preventDefault();
},false);
if(toastTimer){
clearTimeout(toastTimer);
}
var timeout = parseInt((seed+1)*1000);
toastTimer = setTimeout(function(){
if(document.getElementById("toastContainer")){
document.body.removeChild(document.getElementById("toastContainer"));
}
},timeout);
}
//显示进度图层
function showProgress(obj){
if(obj){
var rgba = obj.rgba || 0.3;
}else{
var rgba = 0.3;
}
if(document.getElementById("showProgressContainer")){
document.getElementById("showProgressBackground").style.display = 'block';
document.getElementById("showProgressContainer").style.display = 'block';
document.getElementById("showProgressBackground").removeEventListener("touchstart",showProgressTouch);
document.getElementById("showProgressBackground").removeEventListener("touchmove",showProgressTouch);
}else{
var html = '<div id="showProgressBackground" style="position: fixed;width: 100%;height: 100%;left: 0;top: 0;background-color: rgba(0,0,0,'+ rgba +');z-index:999999"></div><div id="showProgressContainer" style="position: fixed;left: 50%;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);background-color: rgba(0,0,0,1);color: #fff;padding: 15px;border-radius: 5px;text-align: center;min-height: 115px;min-width: 115px;z-index:999999"><div style="display: inline-block;height: 30px;width: 30px;background-image: url(https://img.alicdn.com/imgextra/i2/1819728314/TB2TSRFsXXXXXbmXXXXXXXXXXXX_!!1819728314.gif);background-size: 100% 100%;"></div><div id="showProgressTitle" style="padding: 5px 0;color:#fff"></div><div id="showProgressText" style="color:#fff"></div></div>';
document.body.insertAdjacentHTML('beforeEnd', html);
}
if(obj){
var title = obj.title || '努力加载中...';
var text = obj.text || '请稍候...';
var modal = obj.modal || true;
}else{
var title = '努力加载中...';
var text = '请稍候...';
var modal = true;
}
document.getElementById("showProgressTitle").innerHTML = title;
document.getElementById("showProgressText").innerHTML = text;
if(modal){
document.getElementById("showProgressBackground").addEventListener('touchstart',showProgressTouch,false);
document.getElementById("showProgressBackground").addEventListener('touchmove',showProgressTouch,false);
}
}
function showProgressTouch(){
event.stopPropagation();
event.preventDefault();
}
//隐藏进度图层
function hideProgress(){
if(document.getElementById("showProgressContainer")){
document.getElementById("showProgressBackground").style.display = 'none';
document.getElementById("showProgressContainer").style.display = 'none';
}
}
return {
alert: alert,
confirm : confirm,
toast : toast,
login : login,
uid : uid,
clearLogin : clearLogin,
showProgress : showProgress,
hideProgress : hideProgress,
location : location,
go : go,
forward : forward,
back : back,
getRequest : getRequest ,
check_login : check_login,
repeat : repeat
};
})();