运用构造函数写弹窗

介绍：因为自己不想在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 = $('
' +'
' +'
' +'
' + this.config.title + '
'+ this.config.text +'
' +'
' +'
');switch (this.config.type) {case 'alert':xml.children('main').append('');$('body').append(xml);break;case 'confirm':xml.children('main').append('');$('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(){// 关闭弹窗的回调}
})