移动web：Tips消息弹出框
在web开发中经常会用到像alert这样的弹出消息，每个浏览器自带的消息弹出框都不相同。为了统一外观，实现自定义的功能，动手写一个弹出框插件。
对弹出框的实现要求如下：
1. 仿照IOS系统弹出外观
2. 自定义按钮文字
3. 宽高自适应(有最小宽、最大宽限制)
4. 实现弹出框关闭（前、后）的回调 （重点）由于很多操作都是在弹出框显示时操作的
先看下效果：
alert弹出（一个按钮）
alert弹出一条消息 alert弹出一条的消息：带自定义html标签 alert弹出一条消息：自定义按钮文本 alert弹出一条消息：回调
confirm弹出（两个按钮）
confirm弹出: 余额不足 confirm弹出: 购买确认 confirm弹出: 领取红包
open弹出（没有按钮）
open弹出: 提示 open弹出: 倒计时关闭
看完了效果，现在来实现这个消息弹出框。
先贴上代码，仅供参考：
/** * 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(); } }; }());
第一步创建弹出框基本的html标签，并设定样式。
_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'); } }
很简单的一个标签布局结构：
<div id="tips_mask"></div> <div id="tips_box"> <div id="tips_content"></div> <div id="tips_foot"> <a href="javascript:;" id="tips_cancel">取消</a> <a href="javascript:;" id="tips_define">确定</a> </div> </div>
相关样式：
#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)} }
样式中有个属性很重要，这可以让内容容器的文本不换行。
white-space: nowrap;
在PC端版本时不限制宽度很有用，移动端由于设置了最大宽度，当内容超过最大宽度时，设置自动换行。
if (cW > this.maxWidth) { this.content.style.whiteSpace = 'normal'; }
第二步设定内容，并更新位置。
从一个简单的alert弹出消息开始：
// 调用方式1 Tips.alert({ content: 'alert弹出一条消息' }); // 调用方式2 Tips.alert('alert弹出一条消息');
这个弹出经过一个怎样的流程呢？
1. 把内容赋给内容容器
_setContent: function(html) { this.content.innerHTML = html+''; }
2. 修正定位
先获取内容容器的宽度
this.content.style.cssText = 'float:left'; var cW = this.content.offsetWidth; this.content.style.cssText = '';
这里采取把内容容器设为浮动，然后再取消浮动，这种方式获得的宽度是比较实际的，有多少内容就有多少宽，PC端版本采取这种方式也会全兼容。（自适应宽一定要设置内容不换行）
然后是定位，让弹出框在浏览器窗口中垂直居中。
弹出框定位也有几种方式，绝对定位，固定定位。
绝对定位：浏览器滚动条的滚动的距离(scrollTop) 浏览器窗口可视的宽高(clientWidth clientHeight) 弹出框的高(offsetHeight)
固定定位：浏览器窗口可视的宽高(clientWidth clientHeight) 弹出框的高(offsetHeight) （弹出框的宽是内容容器的宽）
// ... this.Box.style.width = 'auto'; // ... 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';
第三步设定按钮，并绑定事件。
这个弹出框插件设定了三种弹出方法，两种调用方式（方法名称可以改成自己想要的名称）。
调用方式1: Tips.alert(option) //显示(确定)按钮 Tips.confirm(option) //显示(确定 取消)按钮 Tips.open(option) //无显示按钮 调用方式2: Tips.alert(content,fn) Tips.confirm(content,fn) Tips.open(content, time)
设置按钮显示和隐藏
_setBtn: function(n, option) { this.foot.style.display = 'block'; this.define.style.display = ''; this.cancel.style.display = ''; switch (parseInt(n)) { case 1: // ... this.cancel.style.display = 'none'; // ... break; case 2: // ... break; case 0: this.foot.style.display = 'none'; this.define.style.display = 'none'; this.cancel.style.display = 'none'; break; } }
设置按钮事件
_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); }; }
这里绑定的事件在弹出框显示时有效，弹出框隐藏时会把事件注销掉, 事件绑定和解绑用了偷懒的写法。
xx.onclick = function(){}; xx.onclick = null;
定义好绑定事件的方法，在设置按钮时调用。
_setBtn: function(n, option) { // ... switch (parseInt(n)) { case 1: // ... if (typeof option === 'function') { this.define.innerText = '确定'; this._define(function() { option && option(); }); } else { this.define.innerText = option.define || '确定'; this._define(option); } break; case 2: // ... 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: // ... break; } }
到此弹出框已经基本完成：创建相应的html标签结构，设置样式；根据要弹出的内容更正位置；对按钮绑定事件。
现在看看顶部的 confirm弹出: 购买确认 confirm弹出: 领取红包 这2个弹出是怎样调用的（其实，写这个插件主要目的就是为了实现这2种的调用）。
购买确认：
Tips.$('#alertBtn_06').onclick = function(e){
var price = 100; //单价
var quantity = 500; // 数量
var total = price * quantity; // 总额
Tips.confirm({
content: '<h3>确定要购买吗？</h3><p>您此次购买份数为<strong>'+ quantity +'</strong>份，每份价格<strong>'+ price +'</strong>元，总需<strong>'+ total +'</strong>元</p><div><input type="checkbox" checked="checked" id="isread" name="isread"><label for="isread">我已阅读并同意</label> <a href="http://m.jd.com/" class="a_gmxy">《购买协议》</a><p id="iserror"></p></div>',
define: '确定购买',
cancel: '不买了',
before: function(){
Tips.$('#iserror').innerText = '';
if(!Tips.$('#isread').checked ){
Tips.$('#iserror').innerText = '你还没有同意购买协议';
return false; // 返回false 阻止弹出框关闭 也不会执行after
}
},
after: function(b){
if(b){
Tips.show('正在处理中'); // 开启加载框
// 在此可以发送ajax请求
// 模拟ajax
setTimeout(function(){
Tips.hide(); // ajax请求成功后 关闭加载框
// ajax请求成功后 弹出其他消息
Tips.alert('<h3>恭喜您，购买成功</h3>',function(){
Tips.alert({
define: '知道了，我会跳转的',
content: '跳转到交易记录页面'
});
// location.href = 'http://m.jd.com/';
});
},1000);
}
}
});
};
领取红包：
Tips.$('#alertBtn_07').onclick = function(e){
// 调用方式1
Tips.confirm({
content: '<h3>输入口令领取红包</h3><div><input type="text" id="str_code" placeholder="请输入口令" style="height:40px;" /><p id="str_error"><p></div>',
before: function(){
if( !/^\d{6}$/.test(Tips.$('#str_code').value) ){
Tips.$('#str_error').innerHTML = '口令为6位数字';
Tips.$('#str_code').focus();
return false;
}
// 发送ajax
Tips.show('正在处理中'); //1 显示加载框
// $.ajax({ }); //2 发送ajax请求
// Tips.hide(); // 3 ajax返回结果 隐藏加载框
// Tips.alert('恭喜你，获得<strong>100</strong>元红包！'); //3-1 提示领取成功
// Tips.$('#str_error').innerHTML = '口令有误，请重新输入'; // 3-2 提示领取失败
// 模拟领取成功
setTimeout(function(){
Tips.hide();
Tips.alert('恭喜你，获得<strong>100</strong>元红包！');
},1500);
// 模拟领取失败
// setTimeout(function(){
// Tips.hide();
// Tips.$('#str_error').innerHTML = '口令有误，请重新输入';
// },1500);
return false; // 始终返回fasle 不让弹出框关闭
}
});
// 调用方式2 不支持关闭前 before 执行
};
这两种调用都用到了 before 选项，这个是在点击确定按钮时、关闭隐藏弹出框前执行函数，代码中定义如下：
_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); }; }
一个函数执行时，假如没有返回值，一般默认为undefined.
function aa(){} var a_bool = aa(); alert(a_bool) // undefined function bb(){ return false; } var b_bool = bb(); alert(b_bool) // false
利用这一点实现了before选项的功能。
var before = option.before && option.before(); var bool = false; before === false && (bool = true); if (bool) { e.stopPropagation(); return false; }
after选项，就是一般的回调了，在弹出框关闭后执行的函数。
其中有很多可以改进的地方，发挥想象，可以做得更多。
谢谢您的阅读。