傳入一個對象作為參數(shù)忙厌,用于設定彈窗的尺寸樣式土辩,設定彈窗的內(nèi)容文本石洗,并可以給彈窗設定按鈕和回調(diào)函數(shù)缀雳。
function createPop(options){
var pop = document.createElement('div')
var width = options.width || 400;
var height = options.height || 300;
pop.style.position = 'fixed'
pop.style.width = width + 'px'
pop.style.height = height + 'px';
pop.style.border = '1px solid #666';
pop.style.left = "50%"
pop.style.marginLeft = -width/2 + 'px'
pop.style.top = "50%"
pop.style.marginTop = -height/2 + 'px'
var body = document.getElementsByTagName('body')[0]
body.appendChild(pop)
var close = document.createElement('div')
close.innerHTML = 'X'
close.style.position = 'absolute'
close.style.width = '30px'
close.style.height = '30px'
close.style.right = '20px'
close.style.top = '10px'
close.style.border = "1px solid #444"
close.style.textAlign = "center"
close.style.lineHeight = "30px"
pop.appendChild(close)
close.onclick = function(){
pop.remove()
}
var msgcontent = options.msg || 'welcome to use pop'
var msg = document.createElement('div')
msg.style.position = "absolute"
msg.style.fontSize = "20px"
msg.style.top = "50px"
msg.style.margin = '0 30px 30px 30px'
msg.innerHTML = msgcontent
pop.appendChild(msg)
body.addEventListener('close',function(){
pop.remove()
})
if (options.commit){
var commit = document.createElement('button')
commit.style.height = "30px"
commit.innerHTML = "commit"
commit.style.fontSize = "20px"
commit.style.position = 'absolute'
commit.style.right = '30px'
commit.style.bottom = "50px"
commit.onclick = options.commit
pop.appendChild(commit)
}
}