<!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>