根据dialog要求,需要给markDialog、box标签写下样式!!!
使用方法
// Dialog.show('提示内容',{
// //配置信息
// isTap:true, //是否支持点击空白出让弹出层消失
// isAuto:2000,//是否支持自动消失,不支持传递0
// callBack:function () {/回调函数:提示消失的时候处理什么事情
//
// }
// });
/*DIALOG*/
~function(){
class Dialog{
constructor(con='',{
isTap=true,
isAuto=2000,
callBack=new Function()
}={}){
//把需要使用的挂载到实例上
this.con=con;
this.isTap=isTap; //是否点击
this.isAuto=isAuto;
this.callBack=callBack;
//创建提示层
this.init();
}
init(){
//1.创建一个弹出层结构
this.createMark();
//控制消失 自动消失
if(this.isAuto!==0){
this.autoTimer=setTimeout(()=>{
this.removeMark();
clearInterval(this.autoTimer);
},this.isAuto);
}
//点击空白消失
if(this.isTap){
$('.markDialog').tap(e=>{
let target= e.target,
$target=$(target),
$par=$target.parent();
if($par.hasOwnProperty('box')) return;
this.removeMark();
clearInterval(this.autoTimer);
})
}
}
createMark(){
let sectionBox=document.createElement('section');
sectionBox.className='markDialog';
sectionBox.innerHTML+=`<div class="box">
<h3>系统提示</h3>
<div class="content">${this.con}</div>
</div>`;
let container=document.querySelector('.mainBox')||document.body;
container.appendChild(sectionBox);
//把容器和创建的盒子挂载到实例上
this.container=container;
this.sectionBox=sectionBox;
}
removeMark(){
if(!this.sectionBox||!this.container){
return;
}
this.container.removeChild(this.sectionBox);
this.sectionBox=null;
this.callBack(this);
}
static show(...arg){
return new Dialog(...arg);
}
window.Dialog=Dialog;
}();