弹出层效果

2021-12-29 17:30:52 作者：互联网


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

标签：效果,button,setStyle,弹出,contentArea,var,createElement,document
来源： https://blog.csdn.net/HAI6545/article/details/122220879