<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>提示</button>
</body>
<script src="./js/utils.js"></script>
<script>
document.querySelector('button').onclick = function(){
myAlert('温馨提示', '下周元旦')
}
function myAlert(title, wrap){
// 先有遮罩
// 跟屏幕一样大的div，透明背景
var shade = document.createElement('div')
setStyle(shade, {
width: '100%',
height: '100%',
position: 'absolute',
left: 0,
top: 0,
backgroundColor: 'rgba(0,0,0,.5)'
})
document.body.appendChild(shade)
// 给遮罩最中间添加一个内容区域
var contentArea = document.createElement('div')
// 加样式
setStyle(contentArea, {
width: '300px',
height: '200px',
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: '#fff',
borderRadius: '10px'
})
// 将内容区域放在遮罩中
shade.appendChild(contentArea)
// 放标题
var titleArea = document.createElement('div')
titleArea.innerText = title
setStyle(titleArea, {
textAlign: 'center',
borderBottom: '1px solid #ccc',
lineHeight: '40px',
fontWeight: 'bold',
})
contentArea.appendChild(titleArea)
// 放内容
var content = document.createElement('div')
content.innerText = wrap
setStyle(content, {
lineHeight: '50px',
padding: '0 0 0 20px'
})
contentArea.appendChild(content)
// 放按钮
var button = document.createElement('button')
button.innerText = '确定'
setStyle(button, {
position: 'absolute',
right: '50px',
bottom: '20px',
outline: 'none',
border: 'none',
backgroundColor: 'rgb(78, 110, 242)',
color: '#fff',
borderRadius: '5px',
width: '50px',
height: '30px'
})
contentArea.appendChild(button)
// 添加关闭按钮
var closeBtn = document.createElement('span')
contentArea.appendChild(closeBtn)
setStyle(closeBtn, {
width: '30px',
height: '30px',
color: '#ccc',
position: 'absolute',
right: '0',
top: '10px',
fontSize: '20px',
cursor: 'pointer'
})
closeBtn.innerText = '×'
// 点击确定就删除遮罩
button.onclick = closeBtn.onclick = function(){
shade.parentElement.removeChild(shade)
}
}
</script>
</html>
/**
* 获取随机数的函数
* @param {number} a 代表范围的数字
* @param {number} b 代表范围的数字
* @return {number} 返回范围内的随机整数
*/
function getRandom(a, b){
var max = a>b?a:b
var min = a>b?b:a
return parseInt(Math.random() * (max - min)) + min
}
/**
* 获取16进制的随机颜色值
*/
function getColor(){
var color = '#'
for(var i=0;i<3;i++){
var num = getRandom(0, 256)
var hex = num.toString(16)
hex = hex.length === 1 ? '0' + hex : hex;
color += hex
}
return color
}
/**
* 批量设置样式的函数
* @param {node} ele 被设置样式的标签对象
* @param {object} styleObj 要设置的样式组成的键值对
*/
function setStyle(ele, styleObj){
for(var key in styleObj){
ele.style[key] = styleObj[key]
}
}