mobile-tips.js

tips.css

.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;
}

tips.js

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;