自定义弹窗：

css

 <style>
        .mask-wrapper{
            position: fixed;
            background: rgba(0,0,0, 0.5);
            z-index: 100001;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }
        .mask-box{
            position: relative;
        }
        .mask-content{
            width: 80%;
            margin: auto;
            margin-top: 150px;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0,0,0, .2);
            border-radius: 6px;
            box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
            outline: 0;
            overflow: hidden;
            transform: rotateX(90deg);
            transition: transform .3s ease-out;
        }
        .mask-header{
            padding: 15px;
            border-bottom: 1px solid #e5e55e;
            font-size: 16px;
            font-weight: bold;
            min-height: 50px;
        }
        .mask-body{
            position: relative;
            padding: 15px;
            max-height: 350px;
            overflow-y: auto;
            overflow-x: auto;
        }
        .mask-foot{
            padding: 15px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }
        .show-am{
            transform: rotateX(0);
        }
    </style>

html

<div class="mask-wrapper">
    <div class="mask-box">
        <div class="mask-content">
            <div class="mask-header">
                <button class="close">&times;</button>
                <span class="mask-header-title"></span>
            </div>
            <div class="mask-body">
                <div class="mask-body-content" id="table-wrapper">
                    <!--渲染内容-->                </div>
            </div>
            <div class="mask-foot">
                <button class="btn btn-default">&times;</button>
            </div>
        </div>
    </div>
</div>

js

 <script>
        class MaskDialog {
            /**
             * 入口函数
             * @param config
             */
            constructor(config = {}) {
                this.cancle = config.cancle || null;
                this.title = config.title || "";
                this.width = config.width || '80%';
                this.height = config.height || 'auto';
                this.inTime = config.inTime || 100;
                this.outTime = config.outTime || 100;
                this.setProps()
                this.init();
                this.renderTitle();
                this.handle();
            }
            /**
             * 预置属性
             */
            setProps() {
                this.mask = document.querySelector(".mask-wrapper");
                this.diaglogContent = document.querySelector(".mask-content");
                this.closeIcon = document.querySelector(".mask-header>.close");
                this.cancleBtn = document.querySelector(".mask-foot>.btn-default");
                this.maskBody = document.querySelector(".mask-body");
                this.titleNode = document.querySelector(".mask-header-title");
                this.tableWrapper = document.querySelector(".mask-body-content");
            }
            /**
             * 初始化
             */
            init() {
                this.diaglogContent.style.width = this.width;
                
                this.diaglogContent.style.height = this.height;
            }
            /**
             * 展示
             */
            show() {
                this.mask.style.display = "block";
                setTimeout(() => {
                    this.diaglogContent.style.transform = "rotateX(0)"
                }, this.inTime)
            }
            /**
             * 隐藏函数
             */
            hidden() {
                this.diaglogContent.style.transform = "rotateX(90deg)"
                setTimeout(() => {
                    this.tableWrapper.innerHTML = "";
                    this.mask.style.display = "none";
                }, this.outTime)
            }
            /**
             * 助手函数
             */
            handle() {
                this.mask.addEventListener('click', event => {
                    event.stopPropagation()
                    console.log(event.target.classList)
                    if (event.target.classList.contains("mask-wrapper") || event.target.classList.contains("mask-box")) {
                        this.hidden();
                    }
                }, false)
                this.closeIcon.addEventListener("click", () => {
                    this.hidden()
                })
                this.cancleBtn.addEventListener("click", () => {
                    this.cancle && this.cancle instanceof Function && this.cancle() || this.hidden();
                })
            }
            /**
             * 渲染函数
             * @param domTemp
             */
            render(domTemp) {
                if (domTemp instanceof HTMLElement) {
                    domTemp = this.domToString(domTemp)
                }
                this.maskBody.innerHTML = domTemp
            }
            /**
             * dom转化成字符串
             * @param node
             * @returns {*}
             */
            domToString(node) {
                let temNode = document.createElement('div');
                let clone_node = node.cloneNode(true);
                temNode.appendChild(clone_node);
                let str = temNode.innerHTML;
                temNode = clone_node = null;
                return str;
            }
            /**
             * 标题渲染
             */
            renderTitle() {
                this.titleNode.innerHTML = this.title;
            }
        }
        /**
         * 使用示例
         */
        function tagWinBox() {
            let mask = new MaskDialog({
                title:`<?php echo $block->getWinBoxTitle();?>`,
                width:'80%',
                height:'80%',
                inTime:100,
                outTime:200
            });
            mask.render(`<?php echo $block->getHtmlCode();?>`);//需渲染的dom 支持字符串模板和真实dom节点
            mask.show();
        }
    </script>