JS 功能弹框封装

Posted 2020-08-16 Mr Zhu

// 功能提示弹框
function messageBox ( option ) {
	var html = ‘‘;
	html += ‘<div class="message-box-head">‘ + option.title;
	html += ‘<i class="icon iconfont message-close"></i></div>‘;

	if ( option.type == ‘using‘ ) {
		html += ‘<div class="message-box-body">‘;
		html += ‘<p class="message-prompt">‘ + option.content + ‘</p>‘;
		html += ‘</div>‘;
	}
	else if ( option.type == ‘disable‘ ) {
		html += ‘<div class="message-box-body">‘;
		html += ‘<p class="message-prompt">‘ + option.content + ‘</p>‘;
		html += ‘</div>‘;
	}
	else if ( option.type == ‘confirm‘ ) {
		html += ‘<div class="message-box-body reset-pwd">‘;
		html += ‘<p class="message-prompt">‘ + option.content + ‘</p>‘;
		html += ‘<div class="message-btn por">‘;
		html += ‘<button class="btn-common btn-gray cancel-btn poa">取消</button>‘;
		html += ‘<button class="btn-common btn-blue yes-btn poa">确定</button>‘;
		html += ‘</div>‘;
		html += ‘</div>‘;
	}
	else if ( option.type == ‘confirm2‘ ) {
		html += ‘<div class="message-box-body confirm-spec">‘;
		html += ‘<div class="message-prompt">‘;
		html += ‘<p>‘+ option.contentTitle +‘</p>‘;
		html += ‘<p>‘+ option.content +‘</p>‘;
		html += ‘</div>‘;
		html += ‘<div class="message-btn por">‘;
		html += ‘<button class="btn-common btn-gray cancel-btn poa">取消</button>‘;
		html += ‘<button class="btn-common btn-blue yes-btn poa">确定</button>‘;
		html += ‘</div>‘;
		html += ‘</div>‘;
	}

	$(".message-box-main").empty().append(html);
	$(".message-box").addClass(‘show‘);

	// 点击取消事件
	$(".cancel-btn").click(function () {
		$(".message-box").removeClass(‘show‘);
		if ( option.cancel ) {
			option.cancel();
		}
	});

	// 点击确定事件
	$(".yes-btn").click(function () {
		$(".message-box").removeClass(‘show‘);
		if ( option.sureFun ) {
			option.sureFun();
		}
	});

	// 点击图标取消事件
	$(".message-close").click(function () {
		$(".message-box").removeClass(‘show‘);
		if ( option.callBack ) {
			option.callBack();
		}
	});


}