JavaScript构造函数之纯js写弹窗

运用构造函数写弹窗

介绍：因为自己不想在html页面中写结构，这个弹窗就全部用js+jq+css完成了

主体部分：

function MyNewDialog(config) {
	this.config = Object.assign({
		title: '请确认身份信息是否正确',
		noText: '否',
		yesText: '是',
		type: 'confirm',
		text: '您有消息提醒',
		closeOnClickModal: true,
	}, config);
	MyNewDialog.prototype.renderDialog(this.config);
}

ps：Object.assign()的用法

是什么？

Object.assign()方法用于将所有课枚举属性值从一个或多个原对象复制到目标对象。它将返回目标对象。

简单来说，就是Object.assign()是对象的静态方法，可以用来赋值对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。是不是有点像{obj,...sourceObj}

怎么用？

Object.assign(target,...source)
参数：target --->目标对象
	 source --->源对象
	 返回值：target，及目标对象

注意事项：

1. Object.assign()方法只会拷贝原对象自身的并且可枚举的属性到目标对象，继承属性和不可枚举属性是不能拷贝的。
2. 针对深拷贝，需要使用其他办法，因为Object.assign()拷贝的是属性值。假如原对象的属性值是一个对象的引用，name它也指向那个引用。
3. 目标对象自身也会改变
4. 异常会打断后续拷贝任务

渲染部分

MyNewDialog.prototype = {
	renderDialog: function (config) {
		this.config = config;
		var xml = $('<div class="dialog">' +
			'<main>' +
			'<div class="dialog_main">' +
			'<h3><i></i><span>' + this.config.title + '</span><i></i></h3>'
			+ this.config.text +
			'</div>' +
			'</main>' +
			'</div>');
		switch (this.config.type) {
			case 'alert':
				xml.children('main').append('<footer>' +
					'<div class="close yes">确认</div>' +
					'</footer>');
				$('body').append(xml);
				break;
			case 'confirm':
				xml.children('main').append('<footer>' +
					'<div class="close no">' + this.config.noText + '</div>' +
					'<div class="close yes">' + this.config.yesText + '</div>' +
					'</footer>');
				$('body').append(xml);
				break;
			default:
				$('body').append(xml);
				break;
		};
		this.handle();
	},
	handle: function () { //事件注册
		var that = this;
		$('.dialog main').on('click', function (e) {
			e.stopPropagation();
		})
		$('body').addClass('not_slide');
		$('.close').on('click', function (e) {
			e.stopPropagation()
			$('.close').unbind();
			$('.dialog').unbind();
			$('.dialog main').unbind();
			$('.dialog').remove();
			$('body').removeClass('not_slide');
			var classArr = $(e.target).attr('class').split(' ')
			if (classArr.indexOf('yes') !== -1) {
				that.config.yesCallBack && that.config.yesCallBack();
			} else {
				that.config.noCallBack && that.config.noCallBack();
			}
		})
		if (this.config.closeOnClickModal) {
			$('.dialog').on('click', function () {
				$('.close').unbind();
				$('.dialog').unbind();
				$('.dialog main').unbind();
				$('.dialog').remove();
				$('body').removeClass('not_slide');
			})
		}
	},
}

CSS部分

.dialog {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	z-index: 99;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
}

.not_slide {
	overflow: hidden;
}

.dialog main {
	background-size: 100% 100%;
	position: relative;
	padding-top: 8%;
	width: 85vw;
	height: 35vh;
	background-color: #fff;
	border-radius: 20px;
}

.dialog_main {
	text-align: center;
}

.dialog_main h3 {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	font-size: 18px;
	color: #766feb;
}

.dialog_main h3 i {
	width: 20px;
	height: 2px;
	background-color: #766feb;
	margin: auto 0;
}

.dialog_main h3 span {
	margin-left: 30px;
	margin-right: 20px;
}

.dialog_main p {
	margin-top: 15px;
	font-size: 20px;
	font-weight: 700;
}

.dialog footer {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	justify-content: space-around;
}

.dialog footer .close {
	width: 40%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 15px;
	border: 1px solid #8491f3;
	font-size: 16px;
}

.dialog footer .yes {
	background-color: #8491f3;
	color: #fff;
}

.dialog footer .no {
	background-color: #fff;
	color: #8491f3;
}

如何使用？

new MyNewDialog({
	text:xxxx, // 你要提示的内容
	noText:xxx, // 取消按钮的文案
	yesText:xxx,// 确认按钮的文案
	type:alert/confirm, // alert为警示框只有确定，confirm会有确认和取消两个按钮
	yesCallBack(){
			// 确认的回调
	},
	noCallBack(){
		// 关闭弹窗的回调
	}
})