Native javascript pop-up layer

<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 {\n' +
            '            display: flex;\n' +
            '            -webkit-box-orient: horizontal;\n' +
            '            flex-direction: row;\n' +
            '            flex-wrap: nowrap;\n' +
            '            -webkit-box-pack: start;\n' +
            '            justify-content: flex-start;\n' +
            '            height: 3.125rem;\n' +
            '            box-sizing: border-box;\n' +
            '            width: 100%;\n' +
            '        }\n' +
            '        .connection-modal_header_12IsA {\n' +
            '            background-color: #CC3333;\n' +
            '        }\n' +
            '        .modal_header-item-help_2F4to {\n' +
            '            margin-right: -4.75rem;\n' +
            '            z-index: 1;\n' +
            '        }\n' +
            '        .button_outlined-button_2f510 {\n' +
            '            cursor: pointer;\n' +
            '            border-radius: .25rem;\n' +
            '            display: flex;\n' +
            '            -webkit-box-orient: horizontal;\n' +
            '            -webkit-box-direction: normal;\n' +
            '            flex-direction: row;\n' +
            '            -webkit-box-align: center;\n' +
            '            align-items: center;\n' +
            '            padding-left: .75rem;\n' +
            '            user-select: none;\n' +
            '        }\n' +
            '        .modal_help-button_1F4rs {\n' +
            '            font-weight: normal;\n' +
            '            font-size: 0.75rem;\n' +
            '        }\n' +
            '        .button_icon_JhCuM {\n' +
            '            margin-right: .5rem;\n' +
            '            height: 1.5rem;\n' +
            '        }\n' +
            '        .button_content_3y79K {\n' +
            '            white-space: nowrap;\n' +
            '        }\n' +
            '        .modal_header-image_2c-LK {\n' +
            '            margin-right: 0.5rem;\n' +
            '        }\n' +
            '        .modal_header-item_1WbOm {\n' +
            '            display: flex;\n' +
            '            -webkit-box-align: center;\n' +
            '            align-items: center;\n' +
            '            padding: 1rem;\n' +
            '            text-decoration: none;\n' +
            '            color: hsla(0, 100%, 100%, 1);\n' +
            '        }\n' +
            '        .modal_header-item-close_4akWi {\n' +
            '            flex-basis: 20rem;\n' +
            '            -webkit-box-pack: end;\n' +
            '            justify-content: flex-end;\n' +
            '            z-index: 1;\n' +
            '        }\n' +
            '        .close-button_close-button_t5jqt {\n' +
            '            display: flex;\n' +
            '            -webkit-box-align: center;\n' +
            '            align-items: center;\n' +
            '            -webkit-box-pack: center;\n' +
            '            justify-content: center;\n' +
            '            overflow: hidden;\n' +
            '            background-color: hsla(0, 0%, 0%, 0.15);\n' +
            '            border-radius: 50%;\n' +
            '            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
            '            cursor: pointer;\n' +
            '            transition: all 0.15s ease-out;\n' +
            '        }\n' +
            '        .close-button_large_2cCrv:hover {\n' +
            '            -webkit-transform: scale(1.1, 1.1);\n' +
            '            -ms-transform: scale(1.1, 1.1);\n' +
            '            transform: scale(1.1, 1.1);\n' +
            '            -webkit-box-shadow: 0 0 0 4px hsla(0, 0%, 0%, 0.15);\n' +
            '            box-shadow: 0 0 0 4px hsla(0, 0%, 0%, 0.15);\n' +
            '        }\n' +
            '        .close-button_close-icon_ywCI5 {\n' +
            '            position: relative;\n' +
            '            margin: 0.25rem;\n' +
            '            user-select: none;\n' +
            '            transform-origin: 50%;\n' +
            '            transform: rotate(45deg);\n' +
            '        }\n' +
            '        .close-button_small_1L9aM .close-button_close-icon_ywCI5 {\n' +
            '            width: 50%;\n' +
            '        }\n' +
            '        .close-button_large_2cCrv .close-button_close-icon_ywCI5 {\n' +
            '              width: 0.75rem;\n' +
            '              height: 0.75rem;\n' +
            '          }\n' +
            '        .modal_center {\n' +
            '            background: hsla(0, 100%, 100%, 1);\n' +
            '            height:100%;\n' +
            '        }\n' +
            '        .connection-modal_activityArea_PqYoO {\n' +
            '            height: 359;\n' +
            '            background-color: hsla(215, 100%, 65%, 0.1);\n' +
            '            display: flex;\n' +
            '            -webkit-box-pack: center;\n' +
            '            justify-content: center;\n' +
            '            -webkit-box-align: center;\n' +
            '            align-items: center;\n' +
            '        }\n' +
            '        .modal_center_content {\n' +
            '            width: 100%;\n' +
            '            height: 100%;\n' +
            '            display: flex;\n' +
            '            -webkit-box-orient: vertical;\n' +
            '            -webkit-box-direction: normal;\n' +
            '            flex-direction: column;\n' +
            '            justify-content: space-around;\n' +
            '        }\n' +
            '        .modal_header-item-title_1N2BE {\n' +
            '            -webkit-box-flex: 1;\n' +
            '            flex-grow: 1;\n' +
            '            flex-shrink: 0;\n' +
            '            -webkit-box-pack: center;\n' +
            '            justify-content: center;\n' +
            '            user-select: none;\n' +
            '            letter-spacing: 0.4px;\n' +
            '            cursor: default;\n' +
            '            margin: 0 -20rem 0 0;\n' +
            '        }';
        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);width: 100%;height: 100%;';
        const modalBox = '<div id="videoId" style="padding-top: 50px;box-sizing: border-box; height:90%;overflow: auto;width: 80%;z-index: 999;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">\n' +
            '        <!--模态框头部-->\n' +
            '        <div class="modal_header_1dNxf connection-modal_header_12IsA" style="position: absolute;top: 0;left: 0;">\n' +
            '            <div class="modal_header-item_1WbOm modal_header-item-help_2F4to">\n' +
            '                <span class="button_outlined-button_2f510 modal_help-button_1F4rs" role="button">\n' +
            '                \n' +
            '                    <div class="button_content_3y79K">\n' +
            '                        <span></span>\n' +
            '                    </div>\n' +
            '                </span>\n' +
            '            </div>\n' +
            '            <div class="modal_header-item_1WbOm modal_header-item-title_1N2BE">\n' +
            '                <img class="modal_header-image_2c-LK" hidden src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGZpbGw9IiM1MTJEQTgiIGQ9Ik0zMy45LDEyLjFIMTQuMkwxNy42LDdjMC40LTAuNiwxLTAuOSwxLjctMC45aDkuNmMwLjcsMCwxLjMsMC4zLDEuNywwLjlMMzMuOSwxMi4xeiIvPgo8cGF0aCBmaWxsPSIjODY2N0M0IiBkPSJNMTQsMTFIOFY5LjJDOCw4LjUsOC41LDgsOS4yLDhoMy42QzEzLjUsOCwxNCw4LjUsMTQsOS4yVjExeiIvPgo8cGF0aCBmaWxsPSIjNUUzNUIxIiBkPSJNNDAsNDJIOGMtMi4yLDAtNC0xLjgtNC00VjE0YzAtMi4yLDEuOC00LDQtNGgzMmMyLjIsMCw0LDEuOCw0LDR2MjRDNDQsNDAuMiw0Mi4yLDQyLDQwLDQyeiIvPgo8Zz4KCTxjaXJjbGUgZmlsbD0iIzUxMkRBOCIgY3g9IjI0IiBjeT0iMjYiIHI9IjEyIi8+CjwvZz4KPGNpcmNsZSBmaWxsPSIjQjM4OEZGIiBjeD0iMjQiIGN5PSIyNiIgcj0iOSIvPgo8Zz4KCQoJCTxyZWN0IHg9IjQyLjIiIHk9IjM4LjMiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSAtMC43MDcxIDAuNzA3MSAwLjcwNzEgLTE4LjAwMTYgNDMuNDU5NikiIGZpbGw9IiM2MTYxNjEiIHdpZHRoPSIyLjQiIGhlaWdodD0iMTAuNCIvPgoJPGNpcmNsZSBmaWxsPSIjNjE2MTYxIiBjeD0iMzUiIGN5PSIzNSIgcj0iMTAiLz4KPC9nPgo8cmVjdCB4PSI0My45IiB5PSI0Mi40IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMC43MDcxIC0xOC43MDg4IDQ1LjE2NzEpIiBmaWxsPSIjMzc0NzRGIiB3aWR0aD0iMi40IiBoZWlnaHQ9IjUuNiIvPgo8Y2lyY2xlIGZpbGw9IiM2NEI1RjYiIGN4PSIzNSIgY3k9IjM1IiByPSI4Ii8+CjxwYXRoIGZpbGw9IiNCQkRFRkIiIGQ9Ik0zOS4zLDMxLjRjLTEuMS0xLjMtMi42LTItNC4yLTJzLTMuMiwwLjctNC4yLDJjLTAuMiwwLjMtMC4yLDAuNiwwLjEsMC45YzAuMywwLjIsMC42LDAuMiwwLjktMC4xICBjMC44LTEsMi0xLjUsMy4zLTEuNXMyLjUsMC42LDMuMywxLjVjMC4xLDAuMSwwLjMsMC4yLDAuNSwwLjJjMC4xLDAsMC4zLDAsMC40LTAuMUMzOS41LDMyLjEsMzkuNSwzMS43LDM5LjMsMzEuNHoiLz4KPHBhdGggZmlsbD0iI0M3QTdGRiIgZD0iTTI5LDIzYy0xLjItMS40LTMtMi4yLTQuOC0yLjJjLTEuOCwwLTMuNiwwLjgtNC44LDIuMmMtMC41LDAuNS0wLjQsMS4zLDAuMSwxLjhjMC41LDAuNSwxLjMsMC40LDEuOC0wLjEgIGMxLjUtMS43LDQuMy0xLjcsNS44LDBjMC4zLDAuMywwLjYsMC40LDEsMC40YzAuMywwLDAuNi0wLjEsMC45LTAuM0MyOS40LDI0LjQsMjkuNSwyMy41LDI5LDIzeiIvPgo8ZWxsaXBzZSBmaWxsPSIjODY2N0M0IiBjeD0iMTEiIGN5PSIxMy41IiByeD0iMiIgcnk9IjEuNSIvPgo8L3N2Zz4=" height="40px" width="40px">二维码设置\n' +
            '            </div>\n' +
            '            <div class="modal_header-item_1WbOm modal_header-item-close_4akWi">\n' +
            '                <div id="cameraCloseId" class="close-button_close-button_t5jqt close-button_large_2cCrv">\n' +
            '                    <img class="close-button_close-icon_ywCI5"  src="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjQ4IDcuNDgiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MnB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+aWNvbi0tYWRkPC90aXRsZT48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIzLjc0IiB5MT0iNi40OCIgeDI9IjMuNzQiIHkyPSIxIi8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMSIgeTE9IjMuNzQiIHgyPSI2LjQ4IiB5Mj0iMy43NCIvPjwvc3ZnPg==">\n' +
            '                </div>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '<! - modal box portion between -> \ n '+
            '        <div class="modal_center">\n' +
            '            <!--内容部分-->\n' +
            '            <div class="modal_center_content">\n' +
            '                <iframe src='+httpUrl+' height="100%" width="100%" />\n' +
            '            </div>\n' +
            '        </div>\n' +
            '    </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>

  

Guess you like

Origin www.cnblogs.com/itzyz/p/11571478.html