所有网站都通用的自定义弹出框alert

A.所有网站都通用的自定义弹出框.A

</body><script>var Alert = function(data){//没有数据则返回if(!data){return;}//设置内容this.content = data.content;//创建提示框面板this.panel = document.createElement('div');//创建提示内容组件this.contentNode = document.createElement('p');//创建确定按钮组件this.confirmBtn = document.createElement('span');//创建关闭按钮组件this.closeBtn = document.createElement('b');//为提示框面板添加类this.panel.className = 'alert';//为关闭按钮添加类this.closeBtn.className = 'a-close';//为确定按钮添加类this.confirmBtn.className = 'a-confirm';//为确定按钮添加文案this.confirmBtn.innerHTML = data.confirm || '确认';//为提示内容添加文案this.contentNode.innerHTML = this.content;//点击确认按钮执行方法，如果data中有success方法则为success方法，否则为空函数this.success = data.success || function(){};//点击关闭按钮执行方法this.fail = data.fail || function(){};}//提示框原型方法Alert.prototype = {//创建方法init : function(){//生成提示框this.panel.appendChild(this.closeBtn);this.panel.appendChild(this.contentNode);this.panel.appendChild(this.confirmBtn);//插入页面中document.body.appendChild(this.panel);//绑定事件this.bindEvent();//显示提示框this.show();},bindEvent : function(){var me = this;//关闭按钮点击事件this.closeBtn.onclick = function(){//执行关闭取消方法me.fail();//隐藏弹层me.hide();}//确定按钮事件this.confirmBtn.onclick = function(){//执行关闭方法me.success();//隐藏弹层me.hide();}},//隐藏弹层方法hide : function(){this.panel.style.display = 'none';},//显示弹层方法show : function(){this.panel.style.display = 'block';}}/*扩展其他类型弹层*///右侧提示框var RightAlert = function(data){//继承基本提示框构造函数Alert.call(this,data);//为确认按钮添加right类设置位置居右this.confirmBtn.className = this.confirmBtn.className + 'right';}//继承基本提示框方法RightAlert.prototype = new Alert();//标题提示框var TitleAlert = function(data){//继承基本提示框构造函数Alert.call(this,data);//设置标题内容this.title = data.title;//创建标题组件this.titleNode = document.createElement('h3');//标题组件中写入标题内容this.titleNode.innerHTML = this.title;}//继承基本提示框方法TitleAlert.prototype = new Alert();//对基本提示框创建 方法扩展TitleAlert.prototype.init = function(){//插入标题this.panel.insertBefore(this.titleNode,this.panel.firstChild);//继承基本提示框init方法Alert.prototype.init.call(this);}//带有取消按钮的弹出框var CancelAlert = function(data){TitleAlert.call(this,data);//取消按钮文案this.cancel = data.cancel;this.cancelBtn = document.createElement('span');this.cancelBtn.className = 'cancel';this.cancelBtn.innerHTML = this.cancel || '取消';}CancelAlert.prototype = new Alert();CancelAlert.prototype.init = function(){TitleAlert.prototype.init.call(this);this.panel.appendChild(this.cancelBtn);}CancelAlert.prototype.bindEvent = function(){var me = this;TitleAlert.prototype.bindEvent.call(me);this.cancelBtn.onclick = function(){me.fail();me.hide();}}new CancelAlert({title : '提示标题',content : '别问我为什么没有样式，我只精通js',success : function(){console.log('ok');},fail : function(){console.log('cancel');}}).init();</script>

请欣赏这漂亮的js代码半个小时。