说明

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

技术难度

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

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


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

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]
    let body = $("body")
    var win = $("<div></div>")
    // body.appendChild(win)
    // jquery的方式，将元素添加body中
    body.append(win)
    win.addClass("window")

    var title = $("<div></div>")
    title.addClass("win-title")
    title.html(winTitle)
    win.append(title)

    var info = $("<div></div>")
    info.addClass("win-info")
    info.html(msg)
    win.append(info)

    var bottom = $("<div></div>")
    bottom.addClass("win-bottom")
    win.append(bottom)

    var winBg = $("<div></div>")
    body.append(winBg)
    winBg.addClass("windowBg")
    winBg.css("display","block")
    winBg.on("click",function(e){
        closeWin(win,winBg)
    })

    let $window = $(window)
    win.css("display","block")
    win.css("top",($window.height() - win.height() )/2+"px")
    win.css("left",($window.width() - win.width() )/2+"px")

    var i = 0
    btns.forEach(function(e){
        var btn = $("<button></button>")
        btn.addClass("win-btn")
        btn.html( e )
        bottom.append(btn)
        // bindClick(btn,funs[i])
        btn.on("click",bindClick(funs[i],win,winBg))
        i++
    })

    $window.on("resize",function(){
        win.css("top",($window.height() - win.height() )/2+"px")
        win.css("left",($window.width() - win.width() )/2+"px")
    })
}


function closeWin(win,winBg){
    win.remove()
    winBg.remove()
}


function bindClick(f,win,winBg){
    return function(){
        f()
        closeWin(win,winBg)
    }
}

// 引入dialog.css
!function(){
    var link = $("<link></link>")
    link.attr("rel","stylesheet")
    link.attr("type","text/css")
    link.attr("href","./css/dialog.css")
    var head = $("head");
    head.append(link);

}()

原文出处：/show_1IX3qFpKf1Vb.html