弹出层 单例模式

　　

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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 @   ascertain  阅读(37)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae