自定义H5弹出框

作者: FMaarten | 来源:发表于2020-04-28 16:59 被阅读0次

vue-弹出框组件
iOS 自定义弹出视图的正确姿势
自定义H5弹出框
IOS 13 FWPopupView弹出框不弹出 window
微信小程序自定义组件弹出框
记录遇到的一些难缠的bug
popupWindow自定义(1)
iOS7、8半透明弹出框及弹出后弹出前页面消失问题
flutter屏幕底部弹出自定义可编辑组件
学习HM微博项目第2天

自定义的组件代码如下：

/*
 *title 弹出框的标题
 *titleColor 弹出框标题颜色
 *message 提示语
 *messageColor 提示语颜色
 *backgroundColor 背景框颜色
 *callBack 回调方法
*/

class UIConfirmAlert {
    constructor(opts = {}) {
        this._defaultOpts = {
            zoom: 1,
            title: '提示',
            titleColor: '#fff',
            message: '提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语提示语',
            messageColor: '#fff',
            backgroundColor:"#494b5a",
            callBack:null
        };
        //其他参数
        this._opts = $.extend(this._defaultOpts, opts);
        //绘制组件
        this._draw();
    }

    /**
     * 绘制组件
     */
    _draw() {
        let testStr = `<div class="alert_mark" style="width:100%;
                                                    height:100%;
                                                    position:fixed;
                                                    z-index:1000;
                                                    top: 0;
                                                    bottom: 0;
                                                    left: 0;
                                                    right: 0;
                                                    justify-content: center;
                                                    display: flex;
                                                    align-items: center;
                                                    background-color:rgba(0,0,0,0.2);
                                                    zoom: ${this._opts.zoom};">
                            <div style="width:400px;background-color:${this._opts.backgroundColor};border-radius: 10px;">
                                <div class="alert_title" style="text-align: center;margin: 10px;color:${this._opts.titleColor}">${this._opts.title}</div>
                                <div style="height:1px;width:100%;border-bottom:1px solid gray;"></div>
                                <div style="justify-content: center;display: flex;align-items: center;">
                                    <div style="margin: 20px 10px 20px 10px;color:${this._opts.messageColor}">${this._opts.message}</div>
                                </div>
                                <div style="height:1px;width:100%;border-bottom:1px solid gray;"></div>
                                <div class="dialog-footer" style="justify-content: center;display: flex;align-items: center;margin: 10px;">
                                    <button type="button" class="dialog-btn-sure" style="background-color: #5a7bff;color:#fff;width:72px;height:32px;font-size:15px;padding: 0;border-radius: 21px;border-width: 0;">确认</button>
                                    <div style="width:30px;"></div>
                                    <button type="button" class="dialog-btn-cancel" style="background-color: #5a7bff;color:#fff;width:72px;height:32px;font-size:15px;padding: 0;border-radius: 21px;border-width: 0;">取消</button>
                                </div>
                            </div>
                    </div>`;

        var body = document.getElementsByTagName("body");
        $(body).append(testStr);
        this._bindEvent();
    }

    _bindEvent() {
        var self = this;
        $(".dialog-btn-sure").click(function () {
            self.cleanup()
        });
        $('.dialog-btn-cancel').click(function () {
            $(".alert_mark").remove()
        });
    }

    cleanup() {
        if (this._opts.callBack){
            this._opts.callBack();
        }
        $(".alert_mark").remove()
    }

}

下面是组件的初始化，此自定义的组件是直接添加在body上面的，直接初始化就可以使用

<!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>components test</title>
    <script src="./libs/jquery.min.js"></script>
    <script src="UIConfirmAlert.js"></script>
</head>

<body style="width: 8640px; height: 7680px;">
</body>
<script>
    new UIConfirmAlert({
        message: "确定要关闭窗口嘛？", callBack: function () {
            console.log("确定");
        }
    });
</script>

</html>

效果如下图所示

1588063840058.jpg