JS 功能弹框封装

// 功能提示弹框
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();
		}
	});


}

  

  

转载于:https://www.cnblogs.com/zsongs/p/6001194.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值