弹出层 单例模式

　　

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.tip{
            width:500px;
            height:300px;
            border:1px solid #333;
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
            background-color: #fff;
            display:none;
        }
        div.tip>.top{
            height:20px;
            background-color: cornflowerblue;
            padding:10px;
        }
        div.tip>.top>span{
            float:right;
            width:20px;
            height:20px;
            background-color: #fff;
            border-radius:50%;
            text-align:center;
            font-size:16px;
            cursor:all-scroll;
            line-height:20px;
        }
        div.tip>.content{
            height:210px;
            background-color: chartreuse;
            position:relative;
            overflow:hidden;
        }
        div.tip>.content>p{
            margin:0;
            position:absolute;
            top:50%;
            left:0;
            padding:0 20px;
            word-wrap:break-word;
            word-break:break-all;
        }
        div.tip>.button{
            height:40px;
            background-color: coral;
            padding:5px 30px;
        }
        div.tip>.button>button{
            float:right;
            padding:10px 40px;
            margin-left:30px;
        }
    </style>
</head>
<body>
    <div class="tip">
        <div class="top">title
            <span>X</span>
        </div>
        <div class="content">
            <p>contentpppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p>
        </div>
        <div class="button">
            <button>submit</button>
            <button>cancel</button>
        </div>
    </div>
    <script>
        
        const singleton=(function(){
            class Tip{
                constructor(){
                    this.elem=document.createElement('div')
                    this.elem.className='tip'
                    document.body.appendChild(this.elem)
                    this.bindEvent()
                }
                setContent(text){
                    this.elem.innerHTML=`
                    <div class="top">title
                        <span class="close">X</span>
                    </div>
                    <div class="content">
                        <p>${text}</p>
                    </div>
                    <div class="button">
                        <button class="submit">submit</button>
                        <button class="cancel">cancel</button>
                    </div>
                    `
                    this.elem.style.display='block'
                }

                bindEvent(){
                    this.elem.addEventListener('click',e=>{
                        if(e.target.className==='close'){
                            this.elem.style.display="none"
                        }
                        if(e.target.className==='submit'){
                            this.elem.style.display='none'
                            this.callback(true)
                        }
                        if(e.target.className==='cancel'){
                            this.elem.style.display='none'
                            this.callback(false)
                        }
                    })
                }
                defineCSS(value){
                    this.elem.querySelector('.top').style.backgroundColor=value
                }
            }   

            let instance=null
            return function(options={},callback){
                if(!instance) instance=new Tip()
                instance.setContent(options.text || 'default text')
                instance.defineCSS(options.topBG || 'brown')
                if(callback) instance.callback=callback
                return instance
            }
        })()
        singleton({
            text:'default text',
            topBG:'black'
        },function(bool){
            console.log(this,bool)
        })
    </script>
</body>
</html>

　　

posted @ 2021-04-25 09:48  ascertain  阅读(43)  评论(0)    收藏  举报