原创自编弹出DIV窗口，包括窗口大小、最小化、最大化、自动关闭、遮罩等设置。

为了需要，前端开发弹出个性DIV窗口，功能包括窗口大小、最小化、最大化、自动关闭、遮罩、等设置，且窗口可以按着随便移动，也可以同时弹出多个窗口。下面是实现完整代码：sc

style部分

.syui-modal {background: #fff;position: fixed; _position:absolute; margin: auto; z-index: 999; overflow: hidden; border-radius: 6px; box-shadow: 0 0 10px #b9b9b9;top:50%;left:50%;transform:translate(-50%, -50%)}
.syui-modal-header {position: absolute;display: flex; justify-content: space-between;box-sizing: border-box;padding: 0px 10px; width: 100%; height: 40px; line-height: 40px;cursor: move; font-size: 14px; border-bottom:1px solid #dee2e6; background-color:#FAFAFA; z-index:1;}

.syui-modal-content{position:absolute;box-sizing:border-box;top:40px;bottom:50px;width:100%;height:auto;overflow:auto;background-color:#ffaaff;}

.syui-modal-footer{position: absolute;box-sizing: border-box;padding: 0px 10px;height:50px;width: 100%;bottom: 0;line-height:50px;text-align:right;}

html部分

<button type="button" class="btn-1">打开弹窗-1</button>
<button type="button" class="btn-2">打开弹窗-2</button>

javascript部分

var modalIndex=0; //打开模态框
		function modal(obj){
			let dval={type:'alert',title:'提示',content:'',width:'350px',height:'200px',header:true,footer:true,zoom:false,closeBtn:false,shadeClose:false,time:0,btn:function(){}},mid=modalIndex,arrVal=[];
			if(obj){for(let key in obj){dval[key]=obj[key];}} arrVal[mid]=dval;
			modalCreate(mid);
			sy('#syuiModal-'+mid).css('width:'+dval.width+';height:'+dval.height+';bottom:auto');
			sy('#syuiModalShade,#syuiModal-'+mid).show(); modalShadeClose(mid,dval.shadeClose);
			sy('#syuiModal-'+mid+' .syui-modal-title').html(dval.title);
			if(dval.content!=''){sy('#syuiModal-'+mid+' .syui-modal-content').html(dval.content);}
			modalIndex+=1;modalRender(mid,arrVal[mid]);return mid;
		}

	   //窗口重置刷新
	   function modalRender(mid,obj){
		if(sy('#syuiModal-'+mid).length!=0){
			if(!obj.header){sy('#syuiModal-'+mid+' .syui-modal-header').addClass('syui-hide');sy('#syuiModal-'+mid+' .syui-modal-content').css('top:0');}
			if(!obj.footer || obj.type=='html'){sy('#syuiModal-'+mid+' .syui-modal-footer').addClass('syui-hide');sy('#syuiModal-'+mid+' .syui-modal-content').css('bottom:0');}
			if(obj.zoom){sy('#syuiModal-'+mid+' .btn-zoom-min,#syuiModal-'+mid+' .btn-zoom-max').removeClass('syui-hide');}
			if(obj.closeBtn){sy('#syuiModal-'+mid+' .btn-cancel-x').addClass('syui-hide');}
			if(obj.type=='alert'){
				sy('#syuiModal-'+mid+' .syui-modal-footer').html('<button type="button" class="btn-cancel syui-btn syui-btn-sm">确定</button>');
			}
			if(obj.time>0){setTimeout(function(){modalClose(mid);},obj.time);}
			sy('#syuiModal-'+mid+' .btn-ok').on(function(){obj.btn('ok',mid);});
			sy('#syuiModal-'+mid+' .btn-cancel,#syuiModal-'+mid+' .btn-cancel-x').on(function(){modalClose(mid); obj.btn('cancel',mid);});
			sy('#syuiModal-'+mid+' .btn-zoom-min').on(function(){
				let type=sy(this).attr('syui-type');
				if(type==0){
					sy(this).html('<i class="syui-icon syui-icon-addition"></i>'); modalZoom(mid,'min'); sy(this).attr('syui-type','1'); sy('#syuiModal-'+mid+' .btn-zoom-max').attr('syui-type','0').html('<i class="syui-icon syui-icon-screen-full"></i>');
				}else{
					sy(this).html('<i class="syui-icon syui-icon-subtraction"></i>'); modalZoom(mid,'',obj.width,obj.height); sy(this).attr('syui-type','0');
				}
			});
			sy('#syuiModal-'+mid+' .btn-zoom-max').on(function(){
				let type=sy(this).attr('syui-type');
				if(type==0){
					sy(this).html('<i class="syui-icon syui-icon-screen-restore"></i>'); modalZoom(mid,'max'); sy(this).attr('syui-type','1'); sy('#syuiModal-'+mid+' .btn-zoom-min').attr('syui-type','0').html('<i class="syui-icon syui-icon-subtraction"></i>');
				}else{
					sy(this).html('<i class="syui-icon syui-icon-screen-full"></i>'); modalZoom(mid,'',obj.width,obj.height); sy(this).attr('syui-type','0');
				}
			});
			modalMove(mid);
		}
	   }
	   //窗口关闭
	   function modalClose(mid){
		   sy('#syuiModal-'+mid).remove(); if((sy('.syui-modal')).length==0){sy('#syuiModalShade').hide();}
	   }
	   //是否点击遮罩关闭窗口
	   function modalShadeClose(mid,tag){
		   if(tag){window.onclick=function(event){if(event.target==syuiModalShade){modalClose(mid);}}}
	   }
	   //窗口放大缩小
	   function modalZoom(mid,type,dw,dh){
	   	switch(type){
	   		case 'min':
	   			sy('#syuiModalShade').hide();
	   			sy('#syuiModal-'+mid).css('top:auto;left:1px;bottom:1px;width:200px;height:40px;transform:translate(0%, 0%)');
	   			break;
	   		case 'max':
	   			sy('#syuiModal-'+mid).css('top:0%;left:0%;bottom:auto;width:100%;height:100%;transform:translate(0%, 0%)');
	   			break;
	   		default:
	   			sy('#syuiModalShade').show();
	   			sy('#syuiModal-'+mid).css('top:50%;left:50%;bottom:auto;width:'+dw+';height:'+dh+';transform:translate(-50%, -50%)');
	   	}
	   }
	   //窗口移动
	   function modalMove(mid){
		   let syui_modal_header = document.querySelector('#syuiModal-'+mid+" .syui-modal-header");
		   let syui_modal = document.querySelector('#syuiModal-'+mid);
		   syui_modal_header.addEventListener("mousedown",function(e){
		       let x=e.pageX-syui_modal.offsetLeft;
		   		   let y=e.pageY-syui_modal.offsetTop;
		       document.addEventListener("mousemove",move);
		   		   function move(e){
		   		       syui_modal.style.left=e.pageX-x+'px';
		   		       syui_modal.style.top=e.pageY-y+'px';
		   		   }
		       document.addEventListener("mouseup",function(e){
		           document.removeEventListener("mousemove",move);
		       });
		   });
	   }
	   //创建新modal
	   function modalCreate(mid){
		   if(mid==0){let shadeDiv = document.createElement("div");shadeDiv.id='syuiModalShade'; shadeDiv.className='syui-shade syui-none';document.body.appendChild(shadeDiv);}let html='<div id="syuiModal-'+mid+'" class="syui-modal"></div>';let html2='<div class="syui-pos-rel syui-h100"><div class="syui-modal-header"><div class="syui-modal-title">提示</div><div><a href="javascript:;" class="btn-zoom-min syui-hide" syui-type="0"><i class="syui-icon syui-icon-subtraction"></i></a> <a href="javascript:;" class="btn-zoom-max syui-hide" syui-type="0"><i class="syui-icon syui-icon-screen-full"></i></a> <a href="javascript:;" class="btn-cancel-x"><i class="syui-icon syui-icon-close"></i></a></div></div><div class="syui-modal-content"><i class="syui-icon syui-icon-loading syui-anim syui-anim-rotate syui-anim-loop"></i>'+mid+'</div><div class="syui-modal-footer"><button type="button" class="btn-cancel syui-btn syui-btn-primary syui-btn-sm">取消</button><button type="button" class="btn-ok syui-btn syui-btn-sm">确定</button></div></div>';let modalDiv = document.createElement("div"); modalDiv.id='syuiModal-'+mid; modalDiv.className='syui-modal'; modalDiv.innerHTML=html2;document.body.appendChild(modalDiv);
	   }

调用实例

sy('.btn-1').on('click',function(){

var index1=modal({

type:'html',

title:'信息',

zoom:true,

//header:false, //不显示头部

shadeClose:true, //点击遮罩关闭窗口

//footer:false, //不显示底部

content:'这是信息内容啦！！',

width:'500px',

height:'300px',

btn:function(res,index){

alert(res+' / '+index);

//modalClose(index);

}

});

//setTimeout(function(){modalClose(index1);},3000);

});

sy('.btn-2').on(function(){

modal({

type:'confirm',

zoom:true, //放大缩小启用

//closeBtn:true, //关闭窗口右上角x按钮

time:3000, //自动关闭窗口

btn:function(res,index){

//alert(res);

modalClose(index);

}

});

});

效果如下：