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

╰+攻爆jí腚メ 2022-06-10 06:41 255阅读 0赞

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代码半个小时。