纯js组件封装-模块化编程-简单实现

1.简介

在网页开发中，弹窗是一个比较常见的东西，很多用户的交互信息的提交反馈一般都是由弹窗来完成。我最近就刚好写了一个需要用到很多风格类似的弹窗的网页。为了提高开发的速度并且增强扩展性，我就写了一套比较简单的弹窗组件，弹窗中某些图标依赖于字体文件（来源iconfont和UI小姐姐），不过还是比较有参考意义的。

2.代码

var d = {
	//获取一个含有默认样式、标题和关闭确定取消按钮的空弹窗
		toolboxDialog: function(param){
			var getCompactCSS = dc.getCompactCSS;
			param = $.extend(true,{
				container: 'body',
				success: null,//成功回调
				cancel: null,//取消回调
				duration: 100,//淡入淡出动画毫秒数
				dialogMain: null,
				//提示盒子的样式
				styles:{
					'background': '#fff',
					'padding' : '15px 18px',
					'font-size' : '14px',
					'color' : '#101010',
					'border-radius' : '2px',
					'box-shadow': '0 0 8px rgba(0,0,0,0.1)',
					'max-width': '100%',
					'min-width': '536px',
					'max-height': '100%',
					'overflow': 'auto'
				},
				sizes: {
					'width' : 'auto',
					'height' : 'auto'
				},
				//是否不设置默认位置 水平垂直居中
				customPostion: false,
				//标题样式
				title: {
					'text' : '修改',
					styles: {
						'color' : '#3F51B5',
						'font-size' : '16px',
						'line-height' : '1.5',
						'padding-bottom' : '13px',
						'padding-top': '7px',
						'text-align': 'center'
					}
				},
				//背景样式
				backgroundStyles: {
					'z-index': '1024',
					'background' : 'transparent',
				},
			},param);
			if(!param.backgroundBounds){
				param.backgroundBounds = {
					"position": 'fixed',
					'left' : '0',
					'top' : '0',
					'width': '100%',
					'height' : '100%'
				};
			}
			//默认添加到body中
			$box = param.container ? $(param.container) : $('body');
			//关闭弹窗的函数
			var close = function(){
				if(typeof param.cancel === "function")
					if(param.cancel()===false){
						return;//当回调函数返回false时不执行隐藏窗口
					}
				$bg.fadeOut(param.duration,function(){
					$(this).remove();
				});
			}
			//设置背景
			var $bg = $('<div class="dialog-background"></div>');
			$bg.css(param.backgroundStyles);
			$bg.css(param.backgroundBounds);
			$bg.fadeOut(0);
			$box.append($bg);
			//创建盒子添加到背景中
			var $dialog = $('<div class="dialog-box"></div>');
			$dialog.css(param.sizes).css(param.styles).css(getCompactCSS('user-select',"none"));
			if(!param.customPostion){
				$dialog.css({
					'position' : 'absolute',
					'left' : '50%',
					'top' : '50%'
				});
				$dialog.css(getCompactCSS('transform','translate(-50%,-50%)'));
			}
			$bg.append($dialog).on("dblclick.dialog",function(e){
				if(e.target==this){
					close();
				}
			});
			//往提示盒子中加入内容 1.关闭按钮
			var $close = $('<div class="dialog-close iconfont icon-close1"></div>');
			$close.css({
				'width': '40px',
				'height': '40px',
				'text-align' : 'center',
				'line-height' : '40px',
				'color' : '#999',
				'font-size' : '16px',
				'position' : 'absolute',
				'right' : '0',
				'top' : '0',
				"cursor" : "pointer"
			}).on("click.dialog",close);
			$dialog.append($close);
			//2.添加标题
			var $title = $('<div class="dialog-title"></title>').html(param.title.text).css(param.title.styles);
			$dialog.append($title);
			//添加抽象的弹窗主题
			var $dialogmain = $('<div class="dialog-main"></div>').append($(param.dialogMain).css({
				'display': '-webkit-box',
				'display': '-ms-flexbox',
				'display': 'flex',
				'-ms-justify-content': 'center',
				'-webkit-justify-content': 'center',
				'justify-content': 'center'
			})).appendTo($dialog);
			//添加确认和取消按钮
			var $ok = $('<div class="dialog-ok">确定</div>');
			var $cancel = $('<div class="dialog-cancel">取消</div>');
			$ok.css({
				'float': 'right',
				'padding': '5px 10px',
				'font-size': '13px',
				'line-height': '20px',
				"text-align":"center",
				"background" : "#3F51B5",
				"color" : "#fff",
				"margin-left" : "16px",
				"cursor" : "pointer",
				'min-width': '80px'
			}).on("click.dialog",function(){
				param.success($dialog,close);
			});
			$cancel.css({
				'float': 'right',
				'padding': '5px 10px',
				'font-size': '13px',
				'line-height': '20px',
				"text-align":"center",
				"background": "#eee",
				"color" : "#3F51B5",
				"cursor" : "pointer&#