用JavaScript+css写的自定义消息框

本消息框的图标需要第三方图标库[font awesome]的支持,详细请进入菜鸟教程网站：点击打开链接

本消息框需要jQuery库的支持

css代码：

			/*弹窗的主体*/
			.ta_main{
				width: 100%;
				height: 100%;
				background: rgb(57,154,254,0);
				position:absolute;
				z-index: 99999;
				top:0;
				display: none;
				padding: 0;
				margin: 0;
			}
			/*弹窗的本身*/
			.ta{
				width: 300px;
				height: 200px;
				position: absolute;
				left:50%;
				top:50%;
				margin-left: -150px;
				margin-top: -100px;
			}
			/*弹窗上标题栏*/
			.ta_top{
				width: 100%;
				height: 30px;
				background: #dfdfdf;
				line-height: 30px;
			}
			/*弹窗中心内容位置*/
			.ta_bottom{
				width: 100%;
				height: 40px;
				position:absolute;
				bottom:0;
				line-height: 40px;
				background: #fff;
			}
			/*弹窗按钮位置*/
			.ta_bottom1{
				width: 100%;
				height: 40px;
				background: #fff;
				position:absolute;
				bottom:0;
				line-height: 40px;
				
			}
			.ta_midd{
				width: 100%;
				height: 130px;
				background: #fff;
				position: absolute;
				top:30px
			}
			.ta_close_btn{
				width: 20px;
				height: 20px;
				border: none;
				float: right;
				margin-right: 10px;
				color: #399afe;
				font-size: 20px;
				background: #dfdfdf;
			}
			.ta_close_btn:hover{
				color: #fff;
				background: #dfdfdf;
			}
			.ta_queding_btn{
				width: 100px;
				height: 30px;
				border-radius: 15px;
				background: #FFf;
				color: #399afe;
				border: solid 1px #399AFE;
				position: absolute;
				left:50%;
				top:5px;
				margin-left: -50px;
			}
			.ta_queding_btn:hover{
				background: #399AFE;
				color: #fff;
			}
			.ta_btn{
				width: 50px;
				height: 30px;
				border-radius: 15px;
				background: #FFf;
				color: #399afe;
				border: none;
				border: solid 1px #399AFE;
				margin: 0 10px;
			}
			.ta_btn:hover{
				color: #fff;
				background: #399AFE;
			}
			.ta_text{
				width: 250px;
				height: 60px;
				position: absolute;
				left:50%;
				
				top:60px;
				margin-left: -125px;
			}
			.ta_midd img{
				width: 150px;
				height: 50px;
				position: absolute;
				left:50%;
				top:5px;
				margin-left: -75px;
			}
			.ta_ico{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				margin-top:10px;
				color: #399AFE;
				text-align: center;
				font-size: 40px;
				line-height: 40px;
			}
			.ta_txt{
				width: 200px;
				height: 30px;
				position: absolute;
				top:15px;
				left:50px;
				line-height: 30px;
				font-size: 9pt;
				color: #989898;
				text-align: center;
				 -webkit-user-select:none;
				    -moz-user-select:none;
				    -ms-user-select:none;
				    user-select:none;
			}

JavaScript代码：

			function init_taichuan(){
				$("body").append("<div class='ta_main'><div class='ta'><div class='ta_top'><button class='ta_close_btn' id='ta_close_btn'><i class='	fa fa-remove'></i></button></div><div class='ta_midd'><img src='img/1.jpg' id='ta_logo'/><div class='ta_text'><div class='ta_ico'><i class='fa fa-thumbs-up' id='ta_ico'></i></div><div class='ta_txt'></div></div></div><div class='ta_bottom'><button class='ta_btn' style='margin-left: 90px;' id='ta_queren2'>确定</button><button class='ta_btn' id='ta_quxiao'>取消</button></div><div class='ta_bottom1'><button class='ta_queding_btn' id='ta_queren'>确定</button></div></div></div>")
			}
			init_taichuan()//初始化窗口
			//消息窗口的确认按钮
			function queren1(fun){
				$('#ta_queren').on('click',fun)	;			
			}
			//确认窗口的确认按钮
			function queren2(fun){
				$('#ta_queren2').on('click',fun);			
			}
			//确认窗口的取消按钮
			function quxiao(fun){
				$('#ta_quxiao').on('click',fun)	;			
			}
			//窗口关闭按钮
			$('#ta_close_btn').on('click',function(){
					$('.ta_main').fadeOut()
			});
			//窗口的样式
			/**
			 * 
			 * @param {Object} ico 第三方图标库图标类名
			 * @param {Object} txt 窗口上提示的内容
			 * @param {Object} type 窗口的类型[空字符串为消息框]
			 * @param {Object} logo 窗口的显示的图像路径
			 */
			function taichuan(ico,txt,type,logo){
				
				if(type!=''){
					$('.ta_bottom1').hide()
				}else{
					$('.ta_bottom').hide()
				}
				$('#ta_ico').removeClass('fa-thumbs-up');
				$('#ta_ico').addClass(ico);
				$('.ta_txt').text(txt);
				$('#ta_logo').attr('src',logo)
				
			}
			taichuan('fa-yen','gggggg','2','img/m3.jpg');
			quxiao(function(){alert('123')});
			queren1(function(){alert('456')});
			queren2(function(){alert('789')});