Javascript知识汇总------面向对象手写弹窗插件

Posted iwzyuan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript知识汇总------面向对象手写弹窗插件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹窗组件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        button {
            margin: 10px;
        }
        .myAlert {
            position: absolute;
            border: 1px solid #ccc;
            z-index: 2;
            background: #fff;
        }
        .title {
            background: blue;
            color: #fff;
            padding: 10px;
            overflow: hidden;
        }
        .title .close {
            float: right;
            border: 2px silid #000;
            cursor: pointer;
        }
        .myAlert .content {
            padding: 10px;
        }
        #mark {
            position: absolute;
            background: rgba(0,0,0,.5);
            z-index: 1;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <button id="btn1">居中弹窗</button>
    <button id="btn2">右下角弹窗</button>
    <button id="btn3">遮罩弹窗</button>
    <div id="mark"></div>
    <!-- <div class="myAlert">
        <div class="title"><span>我是标题</span><span class="close">X</span></div>
        <div class="content">我是内容我是内容我是内容我是内容我是内容</div>
    </div> -->
</body>
<script>
    (function (global){
        function MyAlert(json){
            this.setting = {
                ele : this,
                width: 300,
                height: 400,
                closeBtn : true,
                content : ‘我是内容‘,
                title: ‘默认‘,
                dir : ‘center‘
            };
            extend(this.setting,json);
            this.alertEle = null;
            this.init();
        }
        MyAlert.prototype.blog = {};
        MyAlert.prototype.init  = function (){
            this.blog[this.setting.iNow] == undefined ? this.blog[this.setting.iNow] = true:null;
            if( this.blog[this.setting.iNow] ){
                this.creatAlert();
                this.setting.closeBtn ? this.closeFn() : null;
                if(this.setting.mark){
                    this.setMark();
                }
                this.blog[this.setting.iNow] = false;
            }
        };
        MyAlert.prototype.creatAlert = function (){
            this.alertEle = document.createElement(‘div‘),
                alertEleHtml = ‘‘;
            this.alertEle.className = ‘myAlert‘;

            alertEleHtml += ‘<div class="title">‘
            alertEleHtml += ‘<span>‘+ this.setting.title +‘</span><span class="close">X</span>‘;
            alertEleHtml += ‘</div><div class="content">‘+this.setting.content+‘</div>‘;
            this.alertEle.innerHTML += alertEleHtml
            document.body.appendChild(this.alertEle);
            this.setdata();
        };
        MyAlert.prototype.setdata = function (){
            this.alertEle.style.width = this.setting.width + ‘px‘;
            this.alertEle.style.height = this.setting.height + ‘px‘;
            switch (this.setting.dir){
                case ‘center‘:
                    this.alertEle.style.left = (document.documentElement.clientWidth - this.setting.width)/2 + ‘px‘;
                    this.alertEle.style.top = (document.documentElement.clientHeight - this.setting.height)/2 + ‘px‘;
                break;
                case ‘right‘:
                    this.alertEle.style.right = 0 + ‘px‘;
                    this.alertEle.style.bottom = 0 + ‘px‘;
                break;
            }
        }
        MyAlert.prototype.closeFn = function (){
            var This = this;
            this.alertEle.getElementsByClassName(‘close‘)[0].onclick = function (){
                document.body.removeChild(This.alertEle);
                if(This.markEle){
                    document.body.removeChild(This.markEle);
                }
                This.blog[This.setting.iNow] = true;
            }
        };
        MyAlert.prototype.setMark = function (){
            this.markEle = document.createElement(this.markEle);
            var markEle = document.body.appendChild(this.markEle);
            markEle.id = ‘mark‘;
            markEle.style.width = document.documentElement.clientWidth + ‘px‘;
            markEle.style.height = document.documentElement.clientHeight + ‘px‘;
        }
        function extend(obj1,obj2){
            for(var attr in obj2){
                obj1[attr] = obj2[attr];
            }
        }
        global.MyAlert = MyAlert;
    })(this)
</script>
<script>
    var aBtn = document.getElementsByTagName(‘button‘);
    aBtn[0].onclick = function (){
        var alert1 = new MyAlert({
            ele : this,
            width: 300,
            height: 400,
            closeBtn : true,
            content : ‘我是内容，哈哈哈哈哈‘,
            title: ‘登陆‘,
            dir : ‘center‘,
            iNow : 0
        });  
    }
    aBtn[1].onclick = function (){
        var alert1 = new MyAlert({
            ele : this,
            width: 200,
            height: 100,
            closeBtn : true,
            content : ‘公告内容‘,
            title: ‘公告‘,
            dir : ‘right‘,
            iNow : 1
        });  
    }
    aBtn[2].onclick = function (){
        var alert1 = new MyAlert({
            ele : this,
            width: 300,
            height: 400,
            closeBtn : true,
            content : ‘遮罩‘,
            title: ‘公告‘,
            dir : ‘right‘,
            iNow : 2,
            mark : true
        });  
    }
</script>
</html>

 

以上是关于Javascript知识汇总------面向对象手写弹窗插件的主要内容，如果未能解决你的问题，请参考以下文章

python之面向对象知识点汇总（小白必会）

python全栈开发 * 23 面向对象 知识点汇总 * 180704

python全栈开发 * 18 面向对象知识点汇总 * 180530

javascript面向对象编程（OOP）——汇总

Python基础汇总003--Python面向对象即类(Class)相关的知识点汇总---类的定义对象的创建和使用类的属性和方法

JavaScript -- 知识点汇总