自定义一个alert和confirm弹出框

//先把windows自带的给替换掉，用定义的函数，但不改变名字
    window.alert = alert;

	window.confirm = confirm;

	//alert弹出
	function alert(data){
        //用js创建所需dom
		var a = document.createElement('div'),
		    p = document.createElement('p'),
		    btn = document.createElement("div"),
		    mask = document.createElement('div'),
            textNode = document.createTextNode(data?data:""),
            btnText = document.createTextNode("确定");

	      p.appendChild(textNode);//将需要显示的内容节点插入p标签内

		  btn.appendChild(btnText);//将按钮文字插入按钮标签


	      a.appendChild(p);//将p标签插入外围div

	      a.appendChild(btn);//按钮

	      mask.appendChild(a);//遮罩

	      document.getElementsByTagName("body")[0].appendChild(mask);//把带有遮罩的弹出框带入到网页节点中

	      //点击确认事件
	      btn.onclick = function () {
				mask.parentNode.removeChild(mask);
			};

			//样式方法
		    function css(targetObj, cssObj) {
				for(var i in cssObj) {
					targetObj.style[i] = cssObj[i];
					}
			};

			//样式
			css(a,{
				'background' : '#fff',
				'width':'475px',
				'min-height':'215px',
				'border-radius': '15px',
				'margin': 'auto',
				'text-align': 'center',
				 'word-wrap': 'break-word',
	   			 'padding': '4%',
	   			  'margin-top': '10%',
	    		 'box-sizing': 'border-box',
	    		 'color':'#707070',

			});

			css(p,{
				'line-height': '38px'
			})

			css(btn,{
				    'display': 'inline-block',
				    'background-color': '#00a8d5',
				    'padding': '3% 14%',
				    'border-radius': '10px',
				    'color': '#fff',
				    'cursor': 'pointer',
			});
			css(mask,{

				    'background-color': 'rgba(221, 221, 221, 0.7)',
				    'position': 'fixed',
				    'top': '0',
				    'left': '0',
				    'width': '100%',
				    'height': '100%',
				    'z-index':'10000000',
			});
	};

	//confirm弹出，前面和alert一样
	function confirm(data,callback){
		var a = document.createElement('div'),
			sure = true,
			cancel = false,
		    p = document.createElement('p'),
		    btn_sure = document.createElement("div"),
		    mask = document.createElement('div'),
		    btn_cancle = document.createElement("div"),
            textNode = document.createTextNode(data?data:""),
            btnText = document.createTextNode("确定"),
            btnText_1 = document.createTextNode("取消");

	      p.appendChild(textNode);//将需要显示的内容节点插入p标签内

		  btn_sure.appendChild(btnText);//将按钮文字插入按钮标签

		  btn_cancle.appendChild(btnText_1);

	      a.appendChild(p);//将p标签插入外围div

	      a.appendChild(btn_sure);//确认按钮

	      a.appendChild(btn_cancle);//取消按钮

	      mask.appendChild(a);

	      document.getElementsByTagName("body")[0].appendChild(mask);

	      //点击确认事件，用回调函数
	      btn_cancle.onclick = function () {
	      		
				mask.parentNode.removeChild(mask);
				callback(cancel);
			};

		  btn_sure.onclick = function  () {
		  		var a = 'true';
				mask.parentNode.removeChild(mask);
				callback(sure);

			};

			//样式方法
		   function css(targetObj, cssObj) {
				for(var i in cssObj) {
					targetObj.style[i] = cssObj[i];
					}
			};

			//样式
			css(a,{
				'background' : '#fff',
				'width':'475px',
				'min-height':'215px',
				'border-radius': '15px',
				'margin': 'auto',
				'text-align': 'center',
				 'word-wrap': 'break-word',
	   			 'padding': '4%',
	   			  'margin-top': '10%',
	    		 'box-sizing': 'border-box',
	    		 'color':'#707070',

			});

			css(p,{
				'line-height': '38px'
			})

			css(btn_sure,{
		        'display': 'inline-block',
			    'background-color': 'rgb(0, 168, 213)',
			    'padding': '3% 14%',
			    'border-radius': '10px',
			    'color': 'rgb(255, 255, 255)',
			    'margin-right': '8%',
			     'cursor': 'pointer',
			});

			css(btn_cancle,{
		        'display': 'inline-block',
			    'background-color': 'rgb(0, 168, 213)',
			    'padding': '3% 14%',
			    'border-radius': '10px',
			    'color': 'rgb(255, 255, 255)',
			    'margin-right': '8%',
			    'cursor': 'pointer',
			});

			css(mask,{

				    'background-color': 'rgba(221, 221, 221, 0.7)',
				    'position': 'fixed',
				    'top': '0',
				    'left': '0',
				    'width': '100%',
				    'height': '100%',
				    'z-index':'10000000',
			});
	};

   //这是使用方法
   alert('看着还可以');
   confirm('可以吗',function(item){
       if(item == true){
           alert('谢谢');
       }else{
           alert('请给个宝贵建议再走呗？')
       }
   })