Skip to content

Instantly share code, notes, and snippets.

@iahu
Last active Jan 28, 2016
Embed
What would you like to do?
mobile-tips.js
.mo-tips {
position: fixed;
top: 50%;
left: 50%;
width: 240px;
/*min-height: 100px;*/
margin-top: -50px;
margin-left: -120px;
background-color: #fff;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.mo-tips .closer {
position: absolute;
width: 24px;
height: 24px;
top: 0;
right: 3px;
background-color: #333;
background-color: transparent;
color: #333;
font-size: 24px;
border: 0;
cursor: pointer;
padding-bottom: 10px;
}
.mo-tips .tips-inner {
font-size: 14px;
text-align: center;
}
.mo-tips .tips-bd {
margin-top: 20px;
padding:10px;
min-height: 2em;
}
.mo-tips .tips-ft {
display: table;
position: relative;
bottom: 0;
width: 80%;
margin: 10px auto 0 auto;
margin-bottom: 20px;
}
.mo-tips .tips-ft .tips-controls {
display: table-cell;
width: 1%;
text-align: center;
}
.mo-tips .tips-ft .tips-btn {
background: #f2f2f2;
height: 30px;
color: #333;
border: 0;
width: 80%;
cursor: pointer;
font-size: 12px;
}
.mo-tips .tips-ft .tips-btn.ok {
background: #3B70E2;
color: #fff;
}
.mo-tips .tips-ft .tips-btn.cancel {
background: #666;
color: #fff;
}
.mo-tips.confirm .tips-bd,
.mo-tips.alert .tips-bd {
text-align: center;
}
.mo-tips.message {
padding-bottom: 10px;
}
function tips (opt) {
if (!(this instanceof tips)) {
return new tips(opt);
}
opt = opt || {};
if (typeof opt === 'string') {
opt = {content: opt};
}
if (!opt.content) {
return;
}
this.opt = opt;
var type = /(message|alert|confirm)/g.test(opt.type) ? opt.type : 'message';
this[type](opt);
}
tips.prototype.create = function(opt) {
opt.className = opt.className || '';
opt.showCloser = opt.showCloser || true;
opt.autoClose = opt.autoClose === false ? opt.autoClose : opt.autoClose === true ? 3000 : (+opt.autoClose || 3000);
opt.defaultShow = opt.defaultShow || true;
var $tips = document.createElement('div');
var closer = '<button class="closer">&times;</button>';
$tips.className = 'mo-tips ' + opt.className.toString();
$tips.id = 'no-tips-' + (+new Date());
$tips.innerHTML = (opt.showCloser ? closer : '') +
'<div class="tips-inner">'+
opt.content +
'</div>';
document.body.appendChild($tips);
if (opt.autoClose) {
setTimeout(this.hide.bind(this), opt.autoClose);
}
if (opt.showCloser) {
$tips.querySelector('.closer').addEventListener('click', this.hide.bind(this));
}
this.el = $tips;
};
tips.prototype.message = function(content) {
if (typeof content === 'string') {
content = {content: content};
}
content.className = content.className || 'message';
content.content = '<div class="tips-bd">'+ content.content +'</div>';
this.create(content);
};
tips.prototype.alert = function(content) {
this.create({
className: 'alert',
content: '<div class="tips-bd">'+ content +'</div>'+
'<div class="tips-ft">'+
'<div class="tips-controls"><button class="tips-btn ok" data-role="ok">确定</button></div>'+
'</div>',
autoClose: false
});
};
tips.prototype.confirm = function(content, cb) {
this.create({
className: 'confirm',
content: '<div class="tips-bd">'+ content +'</div>'+
'<div class="tips-ft">'+
'<div class="tips-controls"><button class="tips-btn ok" data-role="ok">确定</button></div>'+
'<div class="tips-controls"><button class="tips-btn cancel" data-role="cancel">取消</button></div>'+
'</div>',
autoClose: false
});
this.el.addEventListener('click', function(e) {
switch(e.target) {
case this.el.querySelector('.tip-btn.ok'):
cb(true);
break;
case this.el.querySelector('.tip-btn.cancel'):
cb(false);
break;
default:
this.hide();
}
}.bind(this));
};
tips.prototype.hide = function() {
this.el.style.display = 'none';
};
tips.prototype.show = function() {
this.el.style.display = 'block';
};
module.exports = tips;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment