所有网站都通用的自定义弹出框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代码半个小时。

所有网站都通用的自定义弹出框alert相关推荐

android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
Qt总结：QMessageBox（原生态弹出框及究极超nice封装自定义弹出框）
一.前言在Qt中经常需要弹出窗口,QMessageBox可以实现此功能,一共有三种窗口,information, question, 和 warning,critical, about分别对应感叹号 ...
react native仿微信性别选择-自定义弹出框
简述要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果实现一.配置弹出框弹出框用的是:react-native-popup-dialog(Git地址 ...
OpenLayers标记地图点及点击地图点显示自定义弹出框
css代码(设置弹出框样式) /*设置弹出框样式*/.ol-popup {position: absolute;background-color: #eeeeee;-webkit-filter: dr ...
android弹出框自定义按钮,安卓（kotlin）自定义弹出框
在安卓开发中,我们经常会遇到这种情况,就是可爱的UI们设计了一套属于我们自己风格的弹出框,为了彰显我们自己的风格,使用自动的dialog当然满足不了我们的需求,所以还是得这基础上写出我们自己的提示框, ...
阻止window.onbeforeunload事件的弹出框或自定义弹出框
前引:网上很多关于window.onbeforeunload用来监听页面的意外退出或者关闭事件的用法但都会出现下面的弹出框.为此本博客提供方案使下面弹出框消失,但又能实现自己的相应业务功能. 在使用 ...
js仿苹果风格弹出框alert插件
下载地址 js仿苹果风格弹出框alert插件,多种调用方式. dd:
干掉MessageBox，自定义弹出框JMessbox (WindowsPhone)
先上效果图 QQ退出效果 ...
android自定义弹框效果合集,android 自定义弹出框AlertDialog ，很炫的哦
于是就小小的模仿了下自己写了这个这样的效果, 主要代码如下: dlg = new AlertDialog.Builder(context).create(); dlg.show(); dlg.getW ...

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

所有网站都通用的自定义弹出框alert相关推荐

最新文章

热门文章