前端dialog和Popover兼容性代码JS

dialog和Popover兼容性

直接上代码：

(function () {
    var supportPopover = typeof HTMLElement.prototype.showPopover === 'function';
    if (supportPopover) {
        return;
    }

    var style = document.createElement('style');
    var css = 'dialog{display:block}dialog:not([open]){display:none}[popover]{position:fixed;left:0;top:0;right:0;bottom:0;inset:0;margin:auto;width:fit-content;height:fit-content}[popover]:popover-open{display:block}[popover][data-popover-open="true"]{display:block}[data-popover-open="true"]::after{content:"";background-color:rgba(0,0,0,.3);display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1}';
    var tEl = document.createElement('div');
    tEl.style.width = 'fit-content';
    if (tEl.style.width != 'fit-content') {
        css += '[popover]{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}';
    }
    style.textContent = css;
    document.head.appendChild(style);

    function click(event) {
        var target = event.target || event.srcElement;

        var popoverId = target.getAttribute('popovertarget');
        if (!popoverId) { return; }

        var popoverElement = document.getElementById(popoverId);
        if (!popoverElement) { return; }

        var action = target.getAttribute('popovertargetaction') || 'toggle';
        action = action.toLowerCase();

        if (action === 'show') {
            popoverElement.setAttribute('data-popover-open', 'true');
        } else if (action === 'hide') {
            popoverElement.removeAttribute('data-popover-open');
        } else {
            if (popoverElement.getAttribute('data-popover-open') === 'true') {
                popoverElement.removeAttribute('data-popover-open');
            } else {
                popoverElement.setAttribute('data-popover-open', 'true');
            }
        }
    }

    if (document.addEventListener) {
        document.addEventListener('click', click);
    } else {
        document.attachEvent('onclick', click);
    }
})();

这个代码不适合全部情况，分享出来，给大家一个参考和思路。

效果可以参考：https://goods.hooos.com/ 的商品详情页面