JS弹出模态框内嵌其它网页

kenick
已于 2024-06-14 08:58:58 修改
阅读量4.7k
点赞数 1
分类专栏：前端文章标签：模态框原生JS
于 2018-12-26 14:02:09 首次发布
本文链接：https://blog.csdn.net/leadseczgw01/article/details/85261035
版权
前端专栏收录该内容
39 篇文章 1 订阅
订阅专栏
1.弹出的模态框中内嵌百度网址

2.html

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button onclick="alertModal('http://www.baidu.com')">弹出模态框</button>
</body>
<script>
    function alertModal(httpUrl){
        // 添加模态框用到的css
        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: hsla(163, 85%, 40%, 1);\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:80%;overflow: auto;width: 840px;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' +
            '                <img class="button_icon_JhCuM" draggable="false" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUwLjIgKDU1MDQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5oZWxwPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9ImhlbHAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik05Ljk5OTA1NDQ5LDE4IEM1LjU4MTYwOTc0LDE4IDIsMTQuNDE3MzQ2MSAyLDEwLjAwMDk0NTMgQzIsNS41ODI2NTM5MSA1LjU4MTYwOTc0LDIgOS45OTkwNTQ0OSwyIEMxNC40MTgzOTAzLDIgMTgsNS41ODI2NTM5MSAxOCwxMC4wMDA5NDUzIEMxOCwxNC40MTczNDYxIDE0LjQxODM5MDMsMTggOS45OTkwNTQ0OSwxOCBaIE05Ljg1MzI1NjEyLDEyLjM2MTUyNjYgQzkuMjY4OTI4MDIsMTIuMzYxNTI2NiA4LjgwNTYyNTgxLDEyLjgzNjA2MjkgOC44MDU2MjU4MSwxMy40MjIxNDM0IEM4LjgwNTYyNTgxLDEzLjk5MzA5OTQgOS4yNjg5MjgwMiwxNC40Njc2MzU2IDkuODUzMjU2MTIsMTQuNDY3NjM1NiBDMTAuNDM5NDc1MiwxNC40Njc2MzU2IDEwLjkxNDEyMzYsMTMuOTkzMDk5NCAxMC45MTQxMjM2LDEzLjQyMjE0MzQgQzEwLjkxNDEyMzYsMTIuODM2MDYyOSAxMC40Mzk0NzUyLDEyLjM2MTUyNjYgOS44NTMyNTYxMiwxMi4zNjE1MjY2IFogTTkuNDYxODEzMDIsMTEuNjQzMTA1MyBMMTAuMTU5NjAyOSwxMS42NDMxMDUzIEMxMC4zNDg3MDU4LDExLjY0MzEwNTMgMTAuNTI0NTcxNiwxMS41MjM5OTg2IDEwLjU2OTk1NjMsMTEuMzQwNjEyMSBDMTAuNjU4ODM0NywxMC45NzAwNTc5IDEwLjkxNDEyMzYsMTAuNzE2NzE5OCAxMS4yNTQ1MDg5LDEwLjQ2MTQ5MTIgTDExLjcxNTkyMDEsMTAuMTIxMTg2MyBDMTIuNDQ1ODU3NSw5LjU3MjkxNzQxIDEyLjg5NzgxMzUsOC45MDU1NDE3NyAxMi44OTc4MTM1LDcuOTMwMDAxMTggQzEyLjg5NzgxMzUsNi43MTQzNTY2MSAxMS45MTA2OTYxLDUuNTMyNzQyNTMgOS45MzgzNTI0NCw1LjUzMjc0MjUzIEM4LjE2MDc4NDc4LDUuNTMyNzQyNTMgNy4xMDE4MDgzLDYuNzM3MDQzNiA3LjEwMTgwODMsOC4xNjA2NTIyNSBDNy4xMDE4MDgzLDguMTk4NDYzOSA3LjEwMzY5OTMzLDguMjM2Mjc1NTUgNy4xMDM2OTkzMyw4LjI3NTk3Nzc5IEM3LjExMzE1NDQ3LDguNDk3MTc1OTQgNy4yODkwMjAyMSw4LjY3ODY3MTg3IDcuNTEwMjcwNjUsOC42ODYyMzQyIEw4LjM4MzkyNjI1LDguNzE2NDgzNTIgQzguNjI0MDg2OTksOC43MjU5MzY0MyA4LjgxODg2MzAyLDguNTMzMDk3MDEgOC44MTg4NjMwMiw4LjI5Mjk5MzAzIEw4LjgxODg2MzAyLDguMjgzNTQwMTIgQzguODE4ODYzMDIsNy43MTI1ODQxOSA5LjIzMjk5ODQ2LDcuMTM5NzM3NjggOS45MzgzNTI0NCw3LjEzOTczNzY4IEMxMC42NzAxODA4LDcuMTM5NzM3NjggMTEuMDIxOTEyMyw3LjYwMTAzOTgyIDExLjAyMTkxMjMsOC4wNzU1NzYwNCBDMTEuMDIxOTEyMyw4LjM5MzE5MzkgMTAuOTE0MTIzNiw4LjY4NjIzNDIgMTAuNTg1MDg0NSw4LjkzMDExOTM0IEw5Ljk2NDgyNjg1LDkuMzkzMzEyMDYgQzkuMjY4OTI4MDIsOS45MTUxMTI4NCA5LjAzNjMzMTQsMTAuNTM1MjIzOSA5LjAzNjMzMTQsMTEuMTA4MDcwNCBDOS4wMzYzMzE0LDExLjE1MTU1MzggOS4wMzgyMjI0MywxMS4xOTUwMzcyIDkuMDM4MjIyNDMsMTEuMjM0NzM5NSBDOS4wNDU3ODY1NSwxMS40NjM0OTk5IDkuMjMyOTk4NDYsMTEuNjQzMTA1MyA5LjQ2MTgxMzAyLDExLjY0MzEwNTMgWiIgaWQ9ImhlbHAtaWNvbiIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=">\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" 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' +
            '        <!--模态框中间部分-->\n' +
            '        <div class="modal_center">\n' +
            '            <!--内容部分-->\n' +
            '            <div class="modal_center_content">\n' +
            '                <iframe src='+httpUrl+' frameborder="0"height="100%" width="100%" scrolling="no"/>\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'));
        });
    }
</script>
</html>