原生javascript 弹出层

<script>
    function edit(idd) {
        // 添加模态框用到的css

        var httpUrl="/admin/editQRC?id="+idd;
//        window.open(httpUrl,'','width=500%,height=100%');
        const cssEle = document.createElement('style');
        cssEle.id = 'cameraCSSId';
        const cssContent = '.modal_header_1dNxf {
' +
            '            display: flex;
' +
            '            -webkit-box-orient: horizontal;
' +
            '            flex-direction: row;
' +
            '            flex-wrap: nowrap;
' +
            '            -webkit-box-pack: start;
' +
            '            justify-content: flex-start;
' +
            '            height: 3.125rem;
' +
            '            box-sizing: border-box;
' +
            '             100%;
' +
            '        }
' +
            '        .connection-modal_header_12IsA {
' +
            '            background-color: #CC3333;
' +
            '        }
' +
            '        .modal_header-item-help_2F4to {
' +
            '            margin-right: -4.75rem;
' +
            '            z-index: 1;
' +
            '        }
' +
            '        .button_outlined-button_2f510 {
' +
            '            cursor: pointer;
' +
            '            border-radius: .25rem;
' +
            '            display: flex;
' +
            '            -webkit-box-orient: horizontal;
' +
            '            -webkit-box-direction: normal;
' +
            '            flex-direction: row;
' +
            '            -webkit-box-align: center;
' +
            '            align-items: center;
' +
            '            padding-left: .75rem;
' +
            '            user-select: none;
' +
            '        }
' +
            '        .modal_help-button_1F4rs {
' +
            '            font-weight: normal;
' +
            '            font-size: 0.75rem;
' +
            '        }
' +
            '        .button_icon_JhCuM {
' +
            '            margin-right: .5rem;
' +
            '            height: 1.5rem;
' +
            '        }
' +
            '        .button_content_3y79K {
' +
            '            white-space: nowrap;
' +
            '        }
' +
            '        .modal_header-image_2c-LK {
' +
            '            margin-right: 0.5rem;
' +
            '        }
' +
            '        .modal_header-item_1WbOm {
' +
            '            display: flex;
' +
            '            -webkit-box-align: center;
' +
            '            align-items: center;
' +
            '            padding: 1rem;
' +
            '            text-decoration: none;
' +
            '            color: hsla(0, 100%, 100%, 1);
' +
            '        }
' +
            '        .modal_header-item-close_4akWi {
' +
            '            flex-basis: 20rem;
' +
            '            -webkit-box-pack: end;
' +
            '            justify-content: flex-end;
' +
            '            z-index: 1;
' +
            '        }
' +
            '        .close-button_close-button_t5jqt {
' +
            '            display: flex;
' +
            '            -webkit-box-align: center;
' +
            '            align-items: center;
' +
            '            -webkit-box-pack: center;
' +
            '            justify-content: center;
' +
            '            overflow: hidden;
' +
            '            background-color: hsla(0, 0%, 0%, 0.15);
' +
            '            border-radius: 50%;
' +
            '            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
' +
            '            cursor: pointer;
' +
            '            transition: all 0.15s ease-out;
' +
            '        }
' +
            '        .close-button_large_2cCrv:hover {
' +
            '            -webkit-transform: scale(1.1, 1.1);
' +
            '            -ms-transform: scale(1.1, 1.1);
' +
            '            transform: scale(1.1, 1.1);
' +
            '            -webkit-box-shadow: 0 0 0 4px hsla(0, 0%, 0%, 0.15);
' +
            '            box-shadow: 0 0 0 4px hsla(0, 0%, 0%, 0.15);
' +
            '        }
' +
            '        .close-button_close-icon_ywCI5 {
' +
            '            position: relative;
' +
            '            margin: 0.25rem;
' +
            '            user-select: none;
' +
            '            transform-origin: 50%;
' +
            '            transform: rotate(45deg);
' +
            '        }
' +
            '        .close-button_small_1L9aM .close-button_close-icon_ywCI5 {
' +
            '             50%;
' +
            '        }
' +
            '        .close-button_large_2cCrv .close-button_close-icon_ywCI5 {
' +
            '               0.75rem;
' +
            '              height: 0.75rem;
' +
            '          }
' +
            '        .modal_center {
' +
            '            background: hsla(0, 100%, 100%, 1);
' +
            '            height:100%;
' +
            '        }
' +
            '        .connection-modal_activityArea_PqYoO {
' +
            '            height: 359;
' +
            '            background-color: hsla(215, 100%, 65%, 0.1);
' +
            '            display: flex;
' +
            '            -webkit-box-pack: center;
' +
            '            justify-content: center;
' +
            '            -webkit-box-align: center;
' +
            '            align-items: center;
' +
            '        }
' +
            '        .modal_center_content {
' +
            '             100%;
' +
            '            height: 100%;
' +
            '            display: flex;
' +
            '            -webkit-box-orient: vertical;
' +
            '            -webkit-box-direction: normal;
' +
            '            flex-direction: column;
' +
            '            justify-content: space-around;
' +
            '        }
' +
            '        .modal_header-item-title_1N2BE {
' +
            '            -webkit-box-flex: 1;
' +
            '            flex-grow: 1;
' +
            '            flex-shrink: 0;
' +
            '            -webkit-box-pack: center;
' +
            '            justify-content: center;
' +
            '            user-select: none;
' +
            '            letter-spacing: 0.4px;
' +
            '            cursor: default;
' +
            '            margin: 0 -20rem 0 0;
' +
            '        }';
        cssEle.innerHTML = cssContent;
        document.querySelector("head").appendChild(cssEle);

        // 添加模态框用到的DIV
        const modalDiv = document.createElement('div');
        modalDiv.id = 'cameraDivId';
        modalDiv.style = 'position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.3); 100%;height: 100%;';
        const modalBox = '<div id="videoId" style="padding-top: 50px;box-sizing: border-box; height:90%;overflow: auto; 80%;z-index: 999;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
' +
            '        <!--模态框头部-->
' +
            '        <div class="modal_header_1dNxf connection-modal_header_12IsA" style="position: absolute;top: 0;left: 0;">
' +
            '            <div class="modal_header-item_1WbOm modal_header-item-help_2F4to">
' +
            '                <span class="button_outlined-button_2f510 modal_help-button_1F4rs" role="button">
' +
            '                
' +
            '                    <div class="button_content_3y79K">
' +
            '                        <span></span>
' +
            '                    </div>
' +
            '                </span>
' +
            '            </div>
' +
            '            <div class="modal_header-item_1WbOm modal_header-item-title_1N2BE">
' +
            '                <img class="modal_header-image_2c-LK" hidden src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGZpbGw9IiM1MTJEQTgiIGQ9Ik0zMy45LDEyLjFIMTQuMkwxNy42LDdjMC40LTAuNiwxLTAuOSwxLjctMC45aDkuNmMwLjcsMCwxLjMsMC4zLDEuNywwLjlMMzMuOSwxMi4xeiIvPgo8cGF0aCBmaWxsPSIjODY2N0M0IiBkPSJNMTQsMTFIOFY5LjJDOCw4LjUsOC41LDgsOS4yLDhoMy42QzEzLjUsOCwxNCw4LjUsMTQsOS4yVjExeiIvPgo8cGF0aCBmaWxsPSIjNUUzNUIxIiBkPSJNNDAsNDJIOGMtMi4yLDAtNC0xLjgtNC00VjE0YzAtMi4yLDEuOC00LDQtNGgzMmMyLjIsMCw0LDEuOCw0LDR2MjRDNDQsNDAuMiw0Mi4yLDQyLDQwLDQyeiIvPgo8Zz4KCTxjaXJjbGUgZmlsbD0iIzUxMkRBOCIgY3g9IjI0IiBjeT0iMjYiIHI9IjEyIi8+CjwvZz4KPGNpcmNsZSBmaWxsPSIjQjM4OEZGIiBjeD0iMjQiIGN5PSIyNiIgcj0iOSIvPgo8Zz4KCQoJCTxyZWN0IHg9IjQyLjIiIHk9IjM4LjMiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSAtMC43MDcxIDAuNzA3MSAwLjcwNzEgLTE4LjAwMTYgNDMuNDU5NikiIGZpbGw9IiM2MTYxNjEiIHdpZHRoPSIyLjQiIGhlaWdodD0iMTAuNCIvPgoJPGNpcmNsZSBmaWxsPSIjNjE2MTYxIiBjeD0iMzUiIGN5PSIzNSIgcj0iMTAiLz4KPC9nPgo8cmVjdCB4PSI0My45IiB5PSI0Mi40IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMC43MDcxIC0xOC43MDg4IDQ1LjE2NzEpIiBmaWxsPSIjMzc0NzRGIiB3aWR0aD0iMi40IiBoZWlnaHQ9IjUuNiIvPgo8Y2lyY2xlIGZpbGw9IiM2NEI1RjYiIGN4PSIzNSIgY3k9IjM1IiByPSI4Ii8+CjxwYXRoIGZpbGw9IiNCQkRFRkIiIGQ9Ik0zOS4zLDMxLjRjLTEuMS0xLjMtMi42LTItNC4yLTJzLTMuMiwwLjctNC4yLDJjLTAuMiwwLjMtMC4yLDAuNiwwLjEsMC45YzAuMywwLjIsMC42LDAuMiwwLjktMC4xICBjMC44LTEsMi0xLjUsMy4zLTEuNXMyLjUsMC42LDMuMywxLjVjMC4xLDAuMSwwLjMsMC4yLDAuNSwwLjJjMC4xLDAsMC4zLDAsMC40LTAuMUMzOS41LDMyLjEsMzkuNSwzMS43LDM5LjMsMzEuNHoiLz4KPHBhdGggZmlsbD0iI0M3QTdGRiIgZD0iTTI5LDIzYy0xLjItMS40LTMtMi4yLTQuOC0yLjJjLTEuOCwwLTMuNiwwLjgtNC44LDIuMmMtMC41LDAuNS0wLjQsMS4zLDAuMSwxLjhjMC41LDAuNSwxLjMsMC40LDEuOC0wLjEgIGMxLjUtMS43LDQuMy0xLjcsNS44LDBjMC4zLDAuMywwLjYsMC40LDEsMC40YzAuMywwLDAuNi0wLjEsMC45LTAuM0MyOS40LDI0LjQsMjkuNSwyMy41LDI5LDIzeiIvPgo8ZWxsaXBzZSBmaWxsPSIjODY2N0M0IiBjeD0iMTEiIGN5PSIxMy41IiByeD0iMiIgcnk9IjEuNSIvPgo8L3N2Zz4=" height="40px" width="40px">二维码设置
' +
            '            </div>
' +
            '            <div class="modal_header-item_1WbOm modal_header-item-close_4akWi">
' +
            '                <div id="cameraCloseId" class="close-button_close-button_t5jqt close-button_large_2cCrv">
' +
            '                    <img class="close-button_close-icon_ywCI5"  src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjQ4IDcuNDgiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MnB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+aWNvbi0tYWRkPC90aXRsZT48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIzLjc0IiB5MT0iNi40OCIgeDI9IjMuNzQiIHkyPSIxIi8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMSIgeTE9IjMuNzQiIHgyPSI2LjQ4IiB5Mj0iMy43NCIvPjwvc3ZnPg==">
' +
            '                </div>
' +
            '            </div>
' +
            '        </div>
' +
            '        <!--模态框中间部分-->
' +
            '        <div class="modal_center">
' +
            '            <!--内容部分-->
' +
            '            <div class="modal_center_content">
' +
            '                <iframe src='+httpUrl+' height="100%" width="100%" />
' +
            '            </div>
' +
            '        </div>
' +
            '    </div>';
        modalDiv.innerHTML = modalBox;
        document.querySelector('body').appendChild(modalDiv);

        // 添加模态框关闭事件
        document.getElementById('cameraCloseId').addEventListener('click',function () {
            const cameraEle = document.getElementById('cameraDivId');
            cameraEle.style.visibility = 'hidden';
            cameraEle.style.display = 'none';
            document.querySelector('body').removeChild(cameraEle);
            document.querySelector('head').removeChild(document.getElementById('cameraCSSId'));
            window.location.reload();
        });

    }
</script>