对IOS系统弹出框的实现要求如下：
1. 仿照IOS系统弹出外观
2. 自定义按钮文字
3. 宽高自适应(有最小宽、最大宽限制)
4. 实现弹出框关闭（前、后）的回调 （重点）由于很多操作都是在弹出框显示时操作的
/**
* LBS iTips (仿iPhone界面版)
* Date: 2015-10-25
* ====================================================================
* 1. 宽高自适应(maxWidth:300 minWidth:250) 引入iTips.css iTips.js （建议js css 放在同一目录）
* ====================================================================
* 2. 调用方式1:
Tips.alert(option) //显示(确定)按钮
Tips.confirm(option) //显示(确定 取消)按钮 option.after(boolean) boolean布尔值 确定true 取消false
Tips.open(option) //无显示按钮 可设置定时关闭 默认不自动关闭需手动关闭
Tips.close() //手动调用关闭 (方式1/方式2都可以调用)
* Tips.show(text) // 显示加载提示框 text为弹出文本 默认加载中
* Tips.hide() // 隐藏加载提示框
* ====================================================================
* 3. 调用方式2:
Tips.alert(content,fn) //content内容 fn弹出框关闭后执行函数 相当于option.after
Tips.confirm(content,fn) //fn(boolean) boolean布尔值 确定true 取消false
Tips.open(content, time) //time自动关闭时间(单位秒) 默认不自动关闭需手动关闭
* ====================================================================
* 4. option选项：
content：内容(可带html标签自定义样式)
before: 点击确定按钮 关闭弹出框前 执行函数 (Tips.alert Tips.confirm中有效)
如果函数返回false 则不会执行(关闭弹出框)和(after) 一般用于做一些检测
after: 点击确定按钮 关闭弹出框后 执行函数 (Tips.alert Tips.confirm中有效)
time: 自动关闭时间(单位秒) time 秒后关闭 (Tips.open中有效)
define: 定义确定按钮的文本 (Tips.alert Tips.confirm中有效)
cancel: 定义取消按钮的文本 (Tips.confirm中有效)
* ====================================================================
* Tips.BG //遮罩层
* Tips.Box //弹出框
* Tips.define //确定按钮
* Tips.cancel //取消按钮
* ====================================================================
**/
;(function() {
window.Tips = {
_create: function() {
if (!this.Box) {
var body = document.getElementsByTagName('body')[0],
html = '<div id="tips_content"></div><div id="tips_foot"><a href="javascript:;" id="tips_cancel">取消</a><a href="javascript:;" id="tips_define">确定</a></div>';
this.BG = document.createElement('div');
this.BG.id = 'tips_mask';
this.Box = document.createElement('div');
this.Box.id = 'tips_box';
this.Box.innerHTML = html;
body.appendChild(this.BG);
body.appendChild(this.Box);
this.content = this.$('#tips_content');
this.foot = this.$('#tips_foot');
this.define = this.$('#tips_define');
this.cancel = this.$('#tips_cancel');
}
},
minWidth: 250,
maxWidth: 300,
_show: function() {
this._fix = true;
this.BG.style.display = 'block';
this.Box.style.display = 'block';
this._css();
this._bind();
},
_hide: function() {
this._fix = false;
this.BG.style.display = 'none';
this.Box.style.display = 'none';
this._unbind();
},
_pos: function() {
var d = document,
doc = d.documentElement,
body = d.body;
this.pH = doc.scrollHeight || body.scrollHeight;
this.sY = doc.scrollTop || body.scrollTop;
this.wW = doc.clientWidth;
this.wH = doc.clientHeight;
if (document.compatMode != "CSS1Compat") {
this.pH = body.scrollHeight;
this.sY = body.scrollTop;
this.wW = body.clientWidth;
this.wH = body.clientHeight;
}
},
_css: function() {
this._pos();
this.BG.style.height = Math.max(this.pH, this.wH) + 'px';
this.Box.style.width = 'auto';
this.content.style.cssText = 'float:left';
var cW = this.content.offsetWidth;
this.content.style.cssText = '';
// width max:300 min:200
if (cW < this.minWidth) cW = this.minWidth;
if (cW > this.maxWidth) {
cW = this.maxWidth;
// this.content.style.whiteSpace = '';
this.content.style.whiteSpace = 'normal';
}
this.Box.style.width = cW + 'px';
// absolute
// this.Box.style.left = (this.wW - cW) / 2 + 'px';
// this.Box.style.top = this.sY + (this.wH - this.Box.offsetHeight) / 2 + 'px';
// fixed 1
// this.Box.style.marginLeft = -(cW / 2) + 'px';
// this.Box.style.marginTop = -(this.Box.offsetHeight / 2) + 'px';
// fixed 2
this.Box.style.marginLeft = -(cW / 2) + 'px';
this.Box.style.top = (this.wH - this.Box.offsetHeight) / 2 + 'px';
},
_fixSize: function() {
var _this = this,
time = +new Date();
this._timeid && clearInterval(this._timeid);
this._timeid = setInterval(function() {
if (+new Date() - time > 1000) {
clearInterval(_this._timeid);
_this._timeid = null;
return false;
}
_this._css();
}, 250);
},
_define: function(option) {
var _this = this;
this.define.onclick = function(e) {
e.stopPropagation();
if (typeof option === 'function') {
_this._hide();
_this.Bool = true;
option && option(_this.Bool);
return;
}
var before = option.before && option.before();
var bool = false;
before === false && (bool = true);
if (bool) {
e.stopPropagation();
return false;
}
_this._hide();
_this.Bool = true;
option.after && option.after(_this.Bool);
};
},
_cancel: function(option) {
var _this = this;
this.cancel.onclick = function(e) {
e.stopPropagation();
_this._hide();
_this.Bool = false;
if (typeof option === 'function') {
option && option(_this.Bool);
return;
}
option.after && option.after(_this.Bool);
};
},
_bind: function() {
this.Box.focus();
this._setEvent();
},
_unbind: function() {
this.Box.blur();
this.define.onclick = null;
this.cancel.onclick = null;
this.define.innerText = '确定';
this.cancel.innerText = '取消';
this._timer && clearTimeout(this._timer);
this._timer = null;
this._timeid && clearInterval(this._timeid);
this._timeid = null;
},
_setEvent: function() {
var _this = this;
this.on(this.BG, 'touchmove', function(e) {
e.preventDefault();
});
this.on(this.Box, 'touchmove', function(e) {
e.preventDefault();
});
this.on(this.define, 'touchstart', function(e) {
_this.define.className.indexOf('tips_hover') < 0 && (_this.define.className += ' tips_hover');
});
this.on(this.define, 'touchend', function(e) {
_this.define.className = _this.define.className.replace('tips_hover', '').trim();
});
this.on(this.cancel, 'touchstart', function(e) {
_this.cancel.className.indexOf('tips_hover') < 0 && (_this.cancel.className += ' tips_hover');
});
this.on(this.cancel, 'touchend', function(e) {
_this.cancel.className = _this.cancel.className.replace('tips_hover', '').trim();
});
this.on(window, 'resize', function(e) {
if (!_this._fix) return;
_this._fixSize();
});
},
_setBtn: function(n, option) {
this.foot.style.display = 'block';
this.define.style.display = '';
this.cancel.style.display = '';
switch (parseInt(n)) {
case 1:
this.define.className = 'tips_define';
this.cancel.style.display = 'none';
if (typeof option === 'function') {
this.define.innerText = '确定';
this._define(function() {
option && option();
});
} else {
this.define.innerText = option.define || '确定';
this._define(option);
}
break;
case 2:
this.define.className = '';
if (typeof option === 'function') {
this.define.innerText = '确定';
this.cancel.innerText = '取消';
this._define(function(b) {
option && option(b);
});
this._cancel(function(b) {
option && option(b);
});
} else {
this.define.innerText = option.define || '确定';
this.cancel.innerText = option.cancel || '取消';
this._define(option);
this._cancel(option);
}
break;
case 0:
this.foot.style.display = 'none';
this.define.style.display = 'none';
this.cancel.style.display = 'none';
break;
}
},
_setContent: function(html) {
this.content.innerHTML = html+'';
},
_setOption: function(option, n, fn) {
var content = '';
this._create();
if (typeof option === 'string' || typeof option === 'number') {
content = option || '';
this._setBtn(n, function(b) {
fn && fn(b);
});
} else {
option = option || {},
content = option.content || '';
this._setBtn(n, option);
}
this._setContent(content);
this._show();
},
_setTime: function(option, t) {
var time = 0,
_this = this;
time = (typeof option === 'string' ? t : option.time);
if (parseInt(time) > 0) {
this._timer = setTimeout(function() {
_this._hide();
}, time * 1000);
}
},
on: function(el, type, handler) {
el.addEventListener(type, handler, false);
},
off: function(el, type, handler) {
el.removeEventListener(type, handler, false);
},
$: function(s) {
return document.querySelector(s);
},
alert: function(option, fn) {
this._setOption(option, 1, fn);
},
confirm: function(option, fn) {
this._setOption(option, 2, function(b) {
fn && fn(b);
});
},
open: function(option, t) {
this._setOption(option, 0);
this._setTime(option, t);
},
close: function() {
this._hide();
}
};
}());
查看完整的css代码
#tips_mask, #tips_box *{margin:0;padding:0; -webkit-tap-highlight-color: rgba(0,0,0,0); color: #333; }
/* absolute */
/*
#tips_mask{display:none;position:absolute;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.3);}
#tips_box{display:none;position:absolute; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}
*/
/* fixed 1*/
/*
#tips_mask{display:none;position:fixed;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.3);}
#tips_box{display:none;position:fixed; left: 50%; top:50%; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}
*/
/* fixed 2*/
#tips_mask{display:none;position:fixed;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.5);}
#tips_box{display:none;position:fixed; left: 50%; top:0; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}
#tips_content{padding:25px 20px; text-align:center; overflow: hidden; font-size:16px; line-height:1.5; white-space: nowrap; /* 不换行 */ border-radius:10px 10px 0 0; }
#tips_foot{position:relative; overflow: hidden; height:48px; font-size: 0; line-height:48px; text-align:center; border-top:1px solid #EBEBEB; border-radius:0 0 10px 10px;}
#tips_foot a{position:relative; display:inline-block; width:50%; text-align:center; font-size:18px; text-decoration: none; outline: none; color: #0FA5F5; }
#tips_foot a:first-child{border-radius:0 0 0 10px; }
#tips_foot a:last-child{ border-radius:0 0 10px 0; }
#tips_foot a.tips_define{ width: 100%; background: #FFF; border-radius:0 0 10px 10px;}
#tips_foot a.tips_hover{ background: #e8e8e8; }
#tips_foot:before{content:'';position:absolute; width:1px; height:48px; margin-left: -1px; left:50%; top:0; background:#EBEBEB;}
-webkit-keyframes bounceIn{
0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes bounceIn{
0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
相关阅读
微信公众号已经普遍运用到学校与家庭
2017-11-211634
互联网+时代下，幼儿园教育面临的困惑与突破，是幼教同行探讨最热话题。很多幼儿园4G、微信、APP齐上阵，唯恐跟不上移动互联网时代的发展。微信报名分享助力活动，朋友越多分享，优惠越大！甚至返现，抢红包……互联网是当今社会无法回避的现象，幼儿园
充分利用微博微信营销，实现营销价值最大化
2018-02-071687
当今时代是一个网络推广的时代，不管是百度推广还是微博微信等营销，尤其是微博微信营销占据着企业网络营销的大壁江山，尤其是微信营销已经成了众多企业线下线上结合发展的桥梁。品牌联播营销机构作为一线上发展为主结合企业线下活动做企业品牌推广，
怎么写好有逼格的微信公众号求关注文案？
2018-11-273837
早些年，文案只是被认为是码字的，大自然的搬运工，东抄抄西改改就完事了。但是目前来看，不管是百度的规则还是微信的规则，都讲究两个字：原创。那么问题就来了，哪里来那么多原创文案，还要苦恼阅读量多少，原文阅读多少，吸粉多少，收入多少...早些
看看微信公众平台是怎么成长为现在的大平台的
2018-02-281553
微信公众平台当时的产品经理杨茂巍，在自己的公众账号“茂巍生活圈”里介绍，“当时根本没有考虑过什么战略布局，商业思维，开放平台，生态链......”。即便连“再小的个体，也有自己的品牌”这句为大家所熟知的广告语也是后来才确定的。 2017年8月17日
微餐饮
2017-08-251590
微信餐饮管理系统 让顾客通过微信可以查看餐厅介绍、就餐环境、菜品、订餐、定位、获取路线导航、点评、反馈意见等。 店家管理员通过微餐厅后台可以审核外卖订单、查看报表数据、修改菜品、验证优惠券等。支持二维码扫码点餐、PAD点餐、微信点餐、点菜宝
