说明

使用时只需要引入 .js 文件即可

技术难度

• js 动态引入 .css 文件
• 循环绑定事件，需要用到函数封装 或 闭包

代码

css 文件

.window{
    width: 300px;
    margin: 0 auto;
    border: 1px solid #999;
    background-color: #fff;
    display: none;
    position:absolute;
    z-index: 100;
}
.windowBg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.3;
    display: none;
}
.win-title{
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #c5c5c5;
    color: #333;
    border-radius: 2px 2px 0 0;
}
.win-info{
    padding: 20px;
    line-height: 24px;
}
.win-bottom{
    text-align: right;
    padding: 0 15px 10px 0px;
}
.win-btn{
    display: inline-block;
    border-color: #1E9FFF;
    background-color: #1E9FFF;
    color: #fff;
    width: 60px;
    height: 30px;
    text-align: center;
}

js文件

/*
* 显示对话框
* title：对话框标题
* msg：对话框显示的提示信息
* btns：数组结构，定义按钮的文字内容
* funs：数组结构，元素是函数对象，与按钮向对应的事件函数
*/
function openDialog(winTitle,msg,btns,funs){
    var body = document.getElementsByTagName("body")[0]
    var win = document.createElement("div")
    body.appendChild(win)
    win.className="window"

    var title = document.createElement("div")
    title.className = "win-title"
    title.innerHTML = winTitle
    win.appendChild(title)

    var info = document.createElement("div")
    info.className = "win-info"
    info.innerHTML = msg
    win.appendChild(info)

    var bottom = document.createElement("div")
    bottom.className = "win-bottom"
    win.appendChild(bottom)

    var i = 0
    btns.forEach(function(e){
        var btn = document.createElement("button")
        btn.className = "win-btn"
        btn.innerHTML = e
        bottom.appendChild(btn)
        // bindClick(btn,funs[i])
        btn.onclick = bindClick(funs[i])
        i++
    })

    var winBg = document.createElement("div")
    body.appendChild(winBg)
    winBg.className="windowBg"
    winBg.style.display = "block"
    winBg.onclick = function(e){
        closeWin()
    }


    win.style.display = "block"
    win.style.top = (window.innerHeight - win.clientHeight )/2+"px"
    win.style.left = (window.innerWidth - win.clientWidth )/2+"px"


    function closeWin(){
        body.removeChild(win)
        body.removeChild(winBg)
    }

    // function bindClick(btn,f){
    //     btn.onclick = function(){
    //         f()
    //         closeWin()
    //     }
    // }
    function bindClick(f){
        return function(){
            f()
            closeWin()
        }
    }
}

// 引入dialog.css
!function(){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = "./css/dialog.css";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);

}()

html

<!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>
    <script src="js/dialog.js"></script>
    <script>
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                openDialog(
                    "确认",
                    "您确认删除数据吗？",
                    ["是","否"],
                    [
                        function(){
                            alert("是")
                        },
                        function(){
                            // alert("否")
                        }
                    ]
                )
            }
            document.getElementById("btn2").onclick = function(){
                openDialog(
                    "提示",
                    "您确认删除数据吗？",
                    ["确定"],
                    [
                        function(){
                            console.log("hello")
                        }
                    ]
                )
            }
        }


    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn">
    <input type="button" value="信息对话框" id="btn2">
</body>
</html>

原文出处：/show_1IX3nnwQskhF.html