插件———弹框

Posted 2020-10-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了插件———弹框相关的知识，希望对你有一定的参考价值。

场景：弹出提示信息；可添加提示信息

pop-layer.js

/**
 * Created by AAA on 2017/9/21.
 */
var popLayer = {
    init (option) {
        this.initOptions(option);
        this.initElement(option);
        document.getElementsByClassName("close-btn")[0].onclick = () => {
            this.closeLayer()
        };
        this.ensuerFunc();
        this.cancelFunc();
    },
    option: {
        title: "提示",            //弹窗标题
        state: "success",        //状态
        text: "",                //文本
        showCancel: false,           // 显示取消按钮
        ensuerFunc: "",              //确定按钮  回调
        cancelFunc: "",              //取消按钮  回调
        ensuerText: "确定",     //确定按钮文本
        cancelText: "取消",       //取消按钮文本
    },
    initOptions(option){
        option = Object.assign(this.option, option);
    },
    closeLayer(){
        document.getElementsByClassName("ldj-hint-ball-windows")[0].parentNode.removeChild(document.getElementsByClassName("ldj-hint-ball-windows")[0]);
    },
    ensuerFunc(){
        document.getElementsByClassName("ensuer")[0].onclick = () => {
            return this.option.ensuerFunc();
        };
    },
    cancelFunc(){
        document.getElementsByClassName("cancel")[0].onclick = () => {
            return this.option.cancelFunc();
        };
    },
    initElement(option){
        var ele = `
                    <div class="ldj-win-cont">
                        <div class="ldj-cont-title">
                            <span class="ldj-title-text">${this.option.title}</span>
                        </div>
                        <div class="close-btn">
                               ×
                        </div>
                        <div class="ldj-ball-detail">
                            <div class="hint-icon-box">
                                ${this.option.state}
                            </div>
                            <div class="hint-text">
                                <span class="text">${this.option.text}</span>
                            </div>
                        </div>
                        <div class="ldj-ball-btn">
                            <span class="hand cancel behavior" style="display: ${this.option.showCancel === false ? "none" : ""}">
                                ${this.option.cancelText}
                            </span>
                            <span class="hand ensuer behavior">${this.option.ensuerText}</span>
                        </div>
                    </div>
                    `;
        var createElement = document.createElement("div");
        createElement.className = "ldj-hint-ball-windows";
        createElement.innerhtml = ele;
        document.body.appendChild(createElement);
    },
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹框</title>
    <link rel="stylesheet" href="pop-layer.css">
</head>
<body>
<button>弹框</button>
<script src="polyfill-objectAssign.js"></script>
<script src="pop-layer.js"></script>
<script>
    document.getElementsByTagName("button")[0].onclick = function () {
        var layerOptions = {
            title: "提示",            //弹窗标题
            state: "error",        //状态
            text: "測試文字",                //文本
            showCancel: true,           // 显示取消按钮
            ensuerFunc: ensuerFunc, //确定按钮  回调
            cancelFunc: cancelFunc, //取消按钮  回调
            ensuerText: "确定",     //确定按钮文本
            cancelText: "取消",       //取消按钮文本
        };
        popLayer.init(layerOptions);
    };
    var ensuerFunc = () => {
        popLayer.closeLayer();
        console.log("ensuerFunc");
    };
    var cancelFunc = () => {
        popLayer.closeLayer();
        console.log("cancelFunc");
    }
</script>
</body>
</html>

工作中使用的版本要考虑兼容ie8，有需要自己改。样式自己决定吧

以上是关于插件———弹框的主要内容，如果未能解决你的问题，请参考以下文章