[JavaScript知识库]依赖jquery的modal弹窗

最近维护一个PHP项目，那个bootStrap用的我头疼，有交互行为的组件或者方法还是自己简单写出来的顺手。不然维护起来实在太麻烦了。

/**
     * 参数分别是传入的html字符串，宽，高，点透明处是否关闭,是否展示弹窗右上角的×
    */
    const $modal = function (content='',width="400",height="300",waperClose=true,showArrow){
        let div = document.createElement('div');
        div.classList.add('my-modal');
        let inHtml = `<div class="waper">${content}<div class="arrow">x</div></div>`;
        document.body.appendChild(div);
        div.innerHTML = inHtml;
        $('.my-modal').css({
            position: 'fixed',
            'z-index': 2000,
            top:0,
            left:0,
            width:'100vw',
            height:'100vh',
            display: 'flex',
            'align-items': 'center',
            'justify-content': 'center',
            'background': 'rgba(100,100,100,0.5)',
        }).click(e=>{
          if(waperClose)  div.remove();
        })
        $('.my-modal .waper').css({
            width:width+'px',
            height:height+'px',
            background:'#fff',
            position: 'relative',
            'border-radius': '3px',
            'padding': '10px 15px',
            'box-shadow': '0 0 6px 3px rgba(50,50,50,0.2)'
        }).click(e=>{
            e.stopPropagation();
        })
        if(showArrow)  
          $('.my-modal .arrow').css({
            position: 'absolute',
            right: '10px',
            top:'0px',
            transform: 'scaleX(1.3)',
            cursor:'pointer',
            fontSize: '14px'
          }).click(()=>{
            div.remove();
          })
    }