移动端提示封装组件

使用

	g.alertBox("您是个人用户,请选择用户类型为自然人！", {
								title: '提示',
								ok: '确定',
							},function(){
						console.log("点击了ok执行操作函数");
					});	

js

var g={};
// 弹出对话框alert
g.alertBox = function(msg, setting, fn) {var setting = $.extend({title: "提示",ok: "确定"}, setting || {});var $mask = $('<div class="gdp_mask"></div>');
var str = '';str += '<div class="gdp_alert">';str += '<div class="gdp_alert_message">';str += '<h6>' + setting.title + '</h6>';str += '<p>';str += typeof(msg) == 'undefined' ? '' : msg;str += '</p>';str += '</div>';str += '<div class="gdp_alert_btn">';str += '<a class="gdp_alert_ok">' + setting.ok + '</a>';str += '</div>';str += '</div>';var $box = $(str);$box.addClass("gdp_alertBox");$box.find('.gdp_alert_ok').click(function() {	if (fn) {		fn();	}	$mask.remove();	$box.remove();});$('body').append($mask).append($box);}

css

/* 弹出对话框 alert*/
.gdp_mask {position: fixed;top: 0px;left: 0px;bottom: 0px;right: 0px;opacity: .6;background-color: #000;z-index: 100;}

.gdp_alertBox {position: fixed;width: 70%;top: 50%;left: 15%;transform: translatey(-50%);background-color: #ffffff;z-index: 101;border-radius: 5px;}

.gdp_alertBox .gdp_alert_message {text-align: center;padding: 22px 10px;}

.gdp_alertBox .gdp_alert_message>h6 {font-size: 16px;color: #1b1b1b;font-weight: bold;margin: 0px;}

.gdp_alertBox .gdp_alert_message>p {font-size: 13px;color: #1b1b1b;margin: 10px 0px;}

.gdp_alertBox .gdp_alert_btn {border-top: 1px solid #e2e2e2;display: flex;}

.gdp_alertBox .gdp_alert_cancel {height: 42px;line-height: 42px;font-size: 16px;color: #0075ff;flex: 1 1 50%;border-right: 1px solid #e2e2e2;text-align: center;}

.gdp_alertBox .gdp_alert_ok {height: 42px;line-height: 42px;font-size: 16px;color: #0075ff;flex: 1 1 50%;text-align: center;}

效果：