请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

分享js自动生成弹框的代码

[复制链接]
查看3247 | 回复2 | 2017-2-14 00:01:42 | 显示全部楼层 |阅读模式
在网上搜索的原生js弹框插件改成自己项目需要的。。目前已改得面目全非了
[JavaScript] 纯文本查看 复制代码
(function(window,undefined){
	 var document = window.document;
	 //消息弹出框对外主体方法
	 var messageBox = {
	 	alert:function(content){  //普通提示框
	 		new Dialog({
	 			html:content,
	 			type:"1",
	 			cancleButton:false
	 		});
	 	},
	 	confirm:function(content,fn){  //询问提示框
	 		new Dialog({
	 			html:content,
	 			cancleButton:true,
	 			type:"2",
	 			callback:function(){
	 				fn();
	 			}
	 		});
	 	},
	 	success:function(content){ // 成功提示框
	 		new Dialog({
	 			html:content,
	 			cancleButton:true,
	 			type:"3"
	 		});
	 	},
	 	error:function(content){ //失败提示框
	 		new Dialog({
	 			html:content,
	 			type:"4"
	 		});
	 	},
	 	warn:function(content){ //警告提示框
	 		new Dialog({
	 			html:content,
	 			type:"5"
	 		});
	 	}
	 };
	 //消息弹出框对内的辅助类
	 var messageHelp = {
	 		create:function(ele,obj){
	 				var element = document.createElement(ele);
	 				for (var i in obj){
	 					if(i === 'class' || i === 'className'){
	 						element.className = obj[i];
	 					}else{
	 						element.setAttribute(i,obj[i]);
	 					}
	 				}
	 				return element;
	 		},
	 		text:function(ele,txt){
	 			if(!this.isElement(ele)){return;}
	 			ele.innerText = txt;
	 			return ele;
	 		},
			append:function(son,parent){
				var  sonEle = this.isString(son) ? this.getId(son) : son;
				var par = this.isString(parent) ? this.getId(parent) : parent;
				if(!this.isElement(par)){
					par = document.body;
				}
				if(!this.isElement(sonEle) || !this.isElement(par)){
					return;
				}
				par.appendChild(sonEle);
			},
			remove:function(o){
				if(o && o.parentNode){
					o.parentNode.removeChild(o);
				}
			},
			addClass:function(o,str){
				if(!this.isElement(o)){
					return;
				}
				var className = o.className;
				var reg =  eval("/^" + str + "$ | " + str + "$|^" + str + " | " + str + " /");
				if(reg.test(className)){
					return;
				}
				if(className !== ''){
					o.className = className + " " + str;
				}else{
					o.className = str;
				}
			},
			removeClass:function(o,str){
				if(!this.isElement(o)){
					return;
				}
				var className = o.className;
				if(this.isEmpty(className)){
					var reg = new RegExp(str,"g");
					var n = className.replace(reg,"");
					o.className = n;
				}
			},
			hasClass : function (o, str) {
				if (!this.isElement(o)) {
					return;
				}
				var className = o.className;
				var reg = eval("/^" + str + "$| " + str + "$|^" + str + " | " + str + " /");
				if (reg.test(className)) {
					return true;
				} else {
					return false;
				}
			},
	 		is : function (o, type) {
				var obj = Object.prototype.toString.call(o);
				if (arguments.length === 2) {
					return obj === '[object ' + type + ']';
				} else {
					return obj.slice(7, -1).toLowerCase();
				}
			},
			isArray : function (o) {
				return this.is(o, 'Array');
			},
			isObject : function (o) {
				return this.is(o, 'Object');
			},
			isFunction : function (o) {
				return this.is(o, 'Function');
			},
			isNumber : function (o) {
				return this.is(o, 'Number');
			},
			isString : function (o) {
				return this.is(o, 'String');
			},
	 		isElement:function(o){
	 			return (o && o.nodeName) ? true : false;
	 		},
	 		isEmpty : function (o) {
				return o === '' || o === null;
			},
	 		getId:function(id){
	 			return this.isString(id) ? document.getElementById(id) : id;
	 		},
	 		add:function(obj,t,fn){
	 			var o = (typeof obj === 'string') ? document.getElementById(obj) : obj;
	 			if(!o){
	 				return;
	 			}
	 			if(o.addEventListener){
	 				o.addEventListener(t,fn,false);
	 			}else if(o.attachEvent){
	 				o.attachEvent('on' + t,fn);
	 			}else{
	 				o['on' + t] = fn;
	 			}
	 		},
	 		delete:function(o,t,fn){
	 			if(o.removeEventListener){
	 				o.removeEventListener(t,fn,false);
	 			}else if(o.detachEvent){
	 				o.deatachEvent('on'+t,fn);
	 			}else{
	 				o['on' + t] = null;
	 			}
	 		},
	 		stopPropagation:function(){
	 			if(window.event){
	 				return this.getEvent().cancelBubble = true;
	 			}else{
	 				return arguments.callee.caller.arguments[0].stopPropagation();
	 			}
	 		},
	 		stopDefault:function(){
	 			if(window.event){
	 				return this.getEvent().returnValue = false;
	 			}else{
	 				return arguments.callee.caller.arguments[0].preventDefault();
	 			}
	 		},
	 		getEvent:function(e){
	 			return e || window.event;
	 		}
	 };
	 function Dialog(arg){
	 	 var obj = arg || { };
	 	 this.identity = function(str1,str2){
	 	 	return str1 === str2;
	 	 };
	 	 this.isFn = function(fn){
	 	 	if(messageHelp.isFunction(fn)){
	 	 		fn.call(this);
	 	 	}
	 	 };
	 	 this.name = {
	 	 	 shadow:"messageui-shadow",
	 	 	 layer : "messageui-dialog",
	 	 	 title:"messageui-title",
	 	 	 content:"messageui-content",
	 	 	 button:"messageui-btn",
	 	 	 buttonOk:"messageui-btnOk",
	 	 	 buttonCancle:"messageui-btnCancle",
	 	 	 iconConfirm:"confirm",
	 	 	 iconSuccess:"success",
	 	 	 iconError:"error",
	 	 	 iconWarn:"warn",
	 	 	 dialogType:"dialogType"
	 	 };
	 	 this.config = {
	 	 	width:messageHelp.isNumber(obj.width) ? obj.width : 300,
	 	 	height: obj.height,
	 	 	title:obj.title || "信息提示",
	 	 	okText : obj.okText || "确  定",
	 	 	cancleText : obj.cancleText || "取  消",
	 	 	okButtoon: this.identity(obj.okButton,false) ? obj.okButton:true,
	 	 	cancleButton:this.identity(obj.cancleButton,false) ? obj.cancleButton:true,
	 	 	html:obj.html,
	 	 	type:obj.type,
	 	 	addClass:obj.addClass,
	 	 	callback:obj.callback
	 	 };
	 	this.shadow = messageHelp.create("div",{"class":this.name.shadow});
		this.layer = messageHelp.create("div",{ "class":this.name.layer});
		this.title = messageHelp.create("div",{"class":this.name.title});
		this.container = messageHelp.create("div",{"class":this.name.content});
		this.button = messageHelp.create("div",{"class":this.name.button});
		messageHelp.append(this.title,this.layer);
		messageHelp.text(this.title,this.config.title);
		if(this.config.type != "1"){
			switch(this.config.type)
			{
				case "2": //代表询问提示框
					this.icon = messageHelp.create("div",{"class":this.name.iconConfirm});
					break;
				case "3": //成功提示框
					this.icon = messageHelp.create("div",{"class":this.name.iconSuccess});
					break;
				case "4": //错误提示框
					this.icon = messageHelp.create("div",{"class":this.name.iconError});
					break;
				case "5": //警告提示框
					this.icon = messageHelp.create("div",{"class":this.name.iconWarn});
					break;
			}
			messageHelp.append(this.container,this.layer);
			messageHelp.addClass(this.icon,this.name.dialogType);
			messageHelp.append(this.icon,this.container);
			messageHelp.text(this.icon,this.config.html);
		}else{
			messageHelp.append(this.container,this.layer);
			messageHelp.text(this.container,this.config.html);
		}
		messageHelp.append(this.button,this.layer);
		if(this.config.okButtoon){ //如果确定按钮为true的话,添加确定按钮
			this.buttonOk = messageHelp.create("a",{"class":this.name.buttonOk});
			messageHelp.append(this.buttonOk,this.button);
			messageHelp.text(this.buttonOk,this.config.okText);
		}
		if(this.config.cancleButton){ //如果取消按钮为true的话,添加取消按钮
			this.buttonCancle = messageHelp.create("a",{"class":this.name.buttonCancle});
			messageHelp.append(this.buttonCancle,this.button);
			messageHelp.text(this.buttonCancle,this.config.cancleText);
		}
		this.init();
	 }
	 Dialog.prototype = {
	 	init:function(){
	 		this.create();
	 		this.event();
	 	},
	 	create:function(){
	 		messageHelp.append(this.shadow);
	 		messageHelp.append(this.layer);
	 	},
	 	event:function(){
	 		var self = this;
	 		var add = messageHelp.add;
	 		add(this.layer,'click',function(e){
	 			messageHelp.stopPropagation(e);
	 		});
	 		add(this.shadow,'click',function(e){
	 			messageHelp.stopPropagation(e);
	 		});
	 		add(this.buttonOk,'click',function(){
	 		 	self.isFn(self.config.callback);
	 			self.remove();[mw_shl_code=css,true]/* 消息弹框组件样式 */
.messageui-shadow{
	position:fixed;
	top:0px;
	left:0px;
	z-index: 300;
	background-color:#000;
	opacity: 0.3;
	width:100%;
	height:100%;
}
.messageui-dialog{
	min-width: 280px;
	max-width: 320px;
	background-color:#fff;
	box-shadow: 1px 1px 50px rgba(0,0,0,.3);
    border-radius: 2px;
    position: fixed;
    z-index: 400;
    left:40%;
    top:30%;
}
.messageui-title{
	background: #00a0e9;
    color: #fff;
    border: none;
    padding: 0 80px 0 20px;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
}
.messageui-content{
	position: relative;
	margin: 0;
    padding: 20px;
    line-height: 24px;
    word-break: break-all;
    overflow: hidden;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
}
.messageui-dialog .dialogType{
	     padding: 20px 10px 20px 60px;
	    background-position: left center;
	    background-repeat: no-repeat;
	    display: inline-block;
	    text-align: left;
}
.messageui-dialog .confirm{
	background-image: url(../imgs/DialogInfo5.png);
}
.messageui-dialog .success{
	background-image: url(../imgs/DialogInfo2.png);
}
.messageui-dialog .error{
	background-image: url(../imgs/DialogInfo3.png);
}
.messageui-dialog .warn{
	background-image: url(../imgs/DialogInfo4.png);
}
.messageui-btn{
	padding: 10px;
    text-align:center;
    border-top: 1px solid #E9E7E7;
}
.messageui-btn a{
	height:28px;
	line-height: 28px;
	font-weight: 400;
	margin:0 10px;
	padding:0 15px;
	border-radius: 2px;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
}
.messageui-btnOk{
	background-color:#2e8ded;
	color:#fff;
}
.messageui-btnCancle{
	background-color:#dedede;
	color:#000;
}
/* 消息弹框组件样式 */

                         });
                         add(this.buttonCancle,'click',function(){
                                 self.remove();
                         });
                         return this;
                 },
                 remove:function(){
                         messageHelp.remove(this.shadow);
                         messageHelp.remove(this.layer);
                         return this;
                 }
         };
         window.messageBox = messageBox;
})(window);[/mw_shl_code]


ibcadmin | 2017-2-14 11:29:00 | 显示全部楼层
+1
C#论坛 www.ibcibc.com IBC编程社区
C#
C#论坛
IBC编程社区
Amy尾巴 | 2017-2-21 08:59:40 | 显示全部楼层
++
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则