js面向对象实现可配置弹框提示框

文档与配置：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="./dialog.js"></script>
    <script>
        let dialog = new Dialog()
        setTimeout(() => {
            dialog.init({
                // width: 500,
                titleText: "我是一条狗",
                contentText: "balabala",
                contentColor: "red",
                contentPosition:"left"
            })
        }, 2222);
    </script>

</body>

</html>

function Dialog(params) {
    // this.init(params)
}
Dialog.prototype.init = function (params) {
    let baseAttr = {
        // 挂在父级相关
        parent: document.getElementsByTagName("body")[0],
        // 容器相关
        oWrapper: document.createElement("div"),
        width: 200,
        height: 150,
        zIndex: 999,
        backgroundColor: "#eee",
        position: "absolute",
        left: 50,
        top: 200,
        transform: "translateX(-50%)",
        // 标题相关
        titleText: "我是Title",
        titlePosition: "center",
        titleHeight: 40,
        titleColor: "#333",
        titleFontSize: 22,
        titlefontWeight: 600,
        // 内容相关
        contentText: `
        // 挂在父级相关  </br>
        parent : document.getElementsByTagName("body")[0],  </br>
        // 容器相关  </br>
        oWrapper: document.createElement("div"),  </br>
        width : 200,  </br>
        height : 150,  </br>
        zIndex : 999,  </br>
        backgroundColor : "#eee",  </br>
        position : "absolute",  </br>
        left : 50,  </br>
        top : 200,  </br>
        transform : "translateX(-50%)",  </br>
        // 标题相关  </br>
        titleText : "我是Title",  </br>
        titlePosition: "center",  </br>
        titleHeight: 40,  </br>
        titleColor: "#333",  </br>
        titleFontSize : 22,  </br>
        titlefontWeight: 600,  </br>
        // 内容相关  </br>
        contentText: "这里是内容!",  </br>
        contentHeight:10,  </br>
        contentPosition:"center",  </br>
        contentColor:"#999",  </br>
        contentFontSize: "18",  </br>
        contentPadding: 20,  </br>
        // 底部相关  </br>
        footerHeight: 40,  </br>
        buttonColor: "#FFF",  </br>
        bottonBackgroundColor: "#f40"  </br>
        `,
        contentHeight: 10,
        contentPosition: "center",
        contentColor: "#999",
        contentFontSize: "18",
        contentPadding: 20,
        // 底部相关
        footerHeight: 40,
        buttonColor: "#FFF",
        bottonBackgroundColor: "#f40"

    }
    baseAttr = Object.assign(baseAttr, params)
    this.parent({
        parent: baseAttr.parent,
        oWrapper: baseAttr.oWrapper
    })
    this.wrapper(baseAttr)
    this.title(baseAttr)
    this.content(baseAttr)
    this.footer(baseAttr)
}
Dialog.prototype.parent = function (params) {
    let oBody = params.parent
    oBody.style.position = "relative"
    oBody.appendChild(params.oWrapper)
}
Dialog.prototype.wrapper = function (params) {
    let oWrapper = params.oWrapper
    oWrapper.style.width = params.width + "px"
    oWrapper.style.zIndex = params.zIndex
    oWrapper.style.backgroundColor = params.backgroundColor
    oWrapper.style.position = params.position
    oWrapper.style.left = params.left + "%"
    oWrapper.style.top = params.top + "px"
    oWrapper.style.transform = params.transform
    oWrapper.style.padding = "0 20px"
}
Dialog.prototype.title = function (params) {
    let oTitle = document.createElement("div");
    oTitle.innerHTML = params.titleText
    oTitle.style.borderBottom = "1px solid #999"
    oTitle.style.height = params.titleHeight + "px";
    oTitle.style.lineHeight = params.titleHeight + "px"
    oTitle.style.textAlign = params.titlePosition;
    oTitle.style.color = params.titleColor
    oTitle.style.fontSize = params.titleFontSize
    oTitle.style.fontWeight = params.titlefontWeight
    params.oWrapper.appendChild(oTitle);
}
Dialog.prototype.content = function (params) {
    let oContent = document.createElement("div");
    oContent.innerHTML = params.contentText
    oContent.height = params.contentHeight + "px"
    oContent.style.textAlign = params.contentPosition
    oContent.style.color = params.contentColor
    oContent.style.padding = params.contentPadding + "px"
    oContent.style.fontSize = params.contentFontSize
    params.oWrapper.appendChild(oContent);
}
Dialog.prototype.footer = function (params) {
    let oFooter = document.createElement("div");
    let oButton = document.createElement("button")
    oFooter.style.width = 100 + "%"
    oFooter.style.borderTop = "1px solid #999"
    oFooter.style.height = params.footerHeight + "px"
    oFooter.style.position = "relative"
    oFooter.appendChild(oButton)
    oButton.innerHTML = "确定"
    oButton.style.padding = 4 + "px"
    oButton.style.backgroundColor = params.bottonBackgroundColor
    oButton.style.color = params.buttonColor
    oButton.style.border = "1px solid transparent"
    oButton.style.cursor = "pointer"
    oButton.style.position = "absolute"
    oButton.style.right = 10 + "px"
    oButton.style.top = 50 + "%"
    oButton.style.transform = "translateY(-50%)"
    oButton.style.borderRadius = 2 + "px"
    oButton.onclick = function BindClick(e) {
        params.oWrapper.style.display = "none"
    }
    params.oWrapper.appendChild(oFooter);
}