ネイティブJavaScriptのポップアップ層

<スクリプト> 
    関数編集(IDD){ 
        //添加模态框用到的CSS 

        VAR httpUrl = "/管理/ editQRC ID =?" + IDD。
// window.open(httpUrl、 ''、 '幅= 500%、高さ= 100%')。
        constのcssEle =のdocument.createElement( 'スタイル'); 
        cssEle.id = 'cameraCSSId'; 
        CONST cssContent = '.modal_header_1dNxf {\ n' + 
            '表示:曲がる; \ n' + 
            '-webkit-ボックス配向を水平; \ n' + 
            'フレックス方向:行; \ n' + 
            'フレックスラップ。 NOWRAP; \ n 'は+ 
            '-webkit-箱パック:開始; \ n'は+ 
            '
            '高さ:3.125rem; \ n' ++ 
            '境界半径:.25remと、\ n' +
            'ボックスサイズ:境界ボックス; \ n' + 
            '幅:100%; \ n' + 
            '} \ n' + 
            '.connection-modal_header_12IsA {\ n' + 
            '背景色:#1 CC3333; \ n'は+ 
            '} \ n' + 
            '.modal_header項目-help_2F4to {\ n' + 
            'マージン右:-4.75rem; \ n' + 
            'z屈折率:1; \ n' + 
            '} \ n' + 
            ' .button_outlined-button_2f510 {\ n」+ 
            'カーソル:ポインタ; \ n' + 
            '表示:曲がる; \ n'は+ 
            '-webkit-ボックスオリエント:水平; \ n'は+ 
            '-webkit-ボックス方向:正常; \ n' + 
            'フレックス方向:行; \ n' + 
            '-webkit-ボックス整列:センター; \ n' + 
            '整列-items:センター; \ n '+ 
            'パディング左:.75rem; \ n' + 
            'ユーザ選択:なし; \ n' + 
            '} \ n' + 
            '.modal_help-button_1F4rs {\ n' + 
            'フォント-weight:正常; \ n '+ 
            'フォントサイズ:0.75rem; \ n' + 
            '} \ n' + 
            '。button_icon_JhCuM {\ n」+ 
            'マージン右:.5rem; \ n' +
            '高さ:1.5rem; \ n' + 5rem; \ n」+ 
            '} \ n' +
            '.button_content_3y79K {\ n' + 
            '空白:NOWRAP; \ n' + 
            '} \ n' + 
            '.modal_header-image_2c-LK {\ n' + 
            'margin-右:0.5rem; \ n '+ 
            '} \ n' + 
            '.modal_header-item_1WbOm {\ n' + 
            '表示:曲がる; \ n' + 
            '-webkit-ボックス整列:センター; \ n' + 
            '整列-items:センター; \ n」は+ 
            'パディング:1rem; \ n'は+ 
            'テキスト装飾:なし; \ n'は+ 
            '色:HSLA(0、100%、100%、1); \ n' + 
            '} \ n'は+ 
            '.modal_header項目-close_4akWi {\ n' +
            'フレックス基礎:20rem; \ n'は+ 
            '-webkit-箱パック:エンド; \ n'の+は、
            '正当化コンテンツを:フレックスエンド; \ n'が+ 
            'Z-指数:1; \ n'は+ 
            " } \ n」+ 
            '.close-button_close-button_t5jqt {\ n' + 
            '表示:曲がる; \ n' + 
            '-webkit-ボックス整列:センター; \ n' + 
            'は、ALIGN-アイテムを:センター; \ n'は+ 
            '-webkitボックスパック:中心; \ n' + 
            'が正当化コンテンツを:センター; \ n' +  
            'オーバーフロー:隠された; \ n」は+
            '背景色:HSLA(0、0%、0%、0.15); \ n'は+ 
            '境界半径の50%を、\ n' +
            'フォントファミリ: "ヘルベチカノイエ"、ヘルベチカ、ゴシック、サンセリフ; \ n' + 
            'カーソル:ポインタ; \ n' + 
            '遷移:全0.15s容易アウト; \ n' + 
            '} \ n'は+ 
            '.close-button_large_2cCrv:ホバーは{\ n' + 
            '-webkit-変換:スケール(1.1、1.1); \ n' + 
            '-ms-変換:スケール(1.1、1.1); \ n' + 
            'の変換:スケール(1.1、1.1); \ n '+ 
            '-webkitボックスシャドウ:0 0 4PX HSLA(0、0%、0%、0.15); \ n' + 
            ' .close- button_close-icon_ywCI5 {\ n」は+ 
            '位置:相対; \ n' + 
            'ボックスシャドウ:0 0 4PX HSLA(0、0%、0%、0.15); \ n」+
            '} \ n' + 
            'マージン:0.25rem; \ n' + 
            'ユーザ選択:なし; \ n' + 
            '変換起源:50%と、\ n' + 
            'の変換:回転(45deg)を、\ n'は+ 
            '} \ n' + 
            '.close-button_small_1L9aM .close-button_close-icon_ywCI5 {\ n' + 
            '幅:50%; \ n' + 
            '} \ n' + 
            'は.close-button_close-icon_ywCI5-button_large_2cCrvは.close {\ n '+ 
            '幅:0.75rem; \ n' + 
            'の高さ:0.75rem; \ n' + 
            '} \ n」+ 
            '.modal_center {\ n' + 
            '背景:HSLA(0、100%、100%、1); \ n」+
            '高さ:100%; \ n' + 
            '} \ n' + 
            '.connection-modal_activityArea_PqYoO {\ n' + 
            'の高さ:359; \ n' + 
            '背景色:HSLA(215、100%、65%、 0.1); \ n '+ 
            '表示:曲がる; \ n' + 
            '-webkitボックスパック:中心; \ n' + 
            'が正当化コンテンツを:センター; \ n' + 
            ' -webkitボックスアライン:中心; \ n '+ 
            'アイテム-整列:センター; \ n' + 
            '} \ n' + 
            '高さ:100%; \ n」は+ 
            '表示:フレックス; \ n'は++ 
            '.modal_center_content {\ n' +
            '幅:100%; \ n' + 
            '-webkit-ボックス配向垂直; \ n' + 
            '-webkitボックス方向:正常; \ n' + 
            'フレックス方向:カラム; \ n' + 
            '正当化コンテンツを:周囲の空間-; \ n '+ 
            '} \ n' + 
            .modal_header項目-title_1N2BE {\ n '+' 
            '-webkitボックスフレックス:1; \ n' + 
            'は、フレックス成長:1 ; \ n」は+ 
            'フレックス縮小:0; \ n'は+ 
            '-webkit-箱パック:センター; \ n'は+ 
            '正当化-コンテンツ:センター; \ n'は+ 
            'は、ユーザ選択:なし; \ n'は+ 
            '文字間隔:0.4px; \ n'は+ 
            'カーソル:デフォルト; \ n'は+ 
            'マージン:0 -20rem 0; \ n' + 
            '}'。
        cssEle.innerHTML = cssContent。
        document.querySelector( "ヘッド")のappendChild(cssEle)。

        //添加模态框用到的DIV 
        のconst modalDiv =のdocument.createElement( 'DIV'); 
        modalDiv.id = 'cameraDivId'; 
        modalDiv.style = '位置:固定;トップ:0;左:0;背景:RGBA(0,0,0,0.3);幅:100%;高さ:100%;'。
        CONST modalBox =「<DIV ID = "VIDEOID"スタイル= "パディングトップ:は50px;ボックスサイズ:境界ボックス;高さ:90%;オーバーフロー:自動;幅:80%; Zインデックス:999;位置:絶対;トップ:50%;左:50%;変換:(-50%、 - 50%)変換、
            '<! -模态框头部- > \ n'は+ 
            ' <div要素クラス= "modal_header-item_1WbOm modal_header項目-title_1N2BE"> \ n」は+ 
            '<DIV CLASS = "modal_header_1dNxf接続modal_header_12IsA"スタイル= "の位置:絶対;トップ:0;左:0;"> \ n'は+ 
            " <DIV CLASS =」
            '<スパンクラス= "button_outlined-button_2f510 modal_help-button_1F4rs"役割= "ボタン"> \ n' + 
            '\ n'は+ 
            '<DIV CLASS = "button_content_3y79K"> \ n' + 
            '<スパン> </ span>の\ N」+ 
            '</ div> \ n' + 
            '</ span>の\ N' + 
            '</ div> \ n'は+
            '<IMGクラス= "modal_header-image_2c-LK" 隠されたSRC = "データ:画像/ SVG + XML、BASE64、PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0 + PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0OCA0OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI + CjxwYXRoIGZpbGw9IiM1MTJEQTgiIGQ9Ik0zMy45LDEyLjFIMTQuMkwxNy42LDdjMC40LTAuNiwxLTAuOSwxLjctMC45aDkuNmMwLjcsMCwxLjMsMC4zLDEuNywwLjlMMzMuOSwxMi4xeiIvPgo8cGF0aCBmaWxsPSIjODY2N0M0IiBkPSJNMTQsMTFIOFY5LjJDOCw4LjUsOC41LDgsOS4yLDhoMy42QzEzLjUsOCwxNCw4LjUsMTQsOS4yVjExeiIvPgo8cGF0aCBmaWxsPSIjNUUzNUIxIiBkPSJNNDAsNDJIOGMtMi4yLDAtNC0xLjgtNC00VjE0YzAtMi4yLDEuOC00LDQtNGgzMmMyLjIsMCw0LDEuOCw0LDR2MjRDNDQsNDAuMiw0Mi4yLDQyLDQwLDQyeiIvPgo8Zz4KCTxjaXJjbGUgZmlsbD0iIzUxMkRBOCIgY3g9IjI0IiBjeT0iMjYiIHI9IjEyIi8 ++ CjxwYXRoIGZpbGw9IiNCQkRFRkIiIGQ9Ik0zOS4zLDMxLjRjLTEuMS0xLjMtMi42LTItNC4yLTJzLTMuMiwwLjctNC4yLDJjLTAuMiwwLjMtMC4yLDAuNiwwLjEsMC45YzAuMywwLjIsMC42LDAuMiwwLjktMC4xICBjMC44LTEsMi0xLjUsMy4zLTEuNXMyLjUsMC42LDMuMywxLjVjMC4xLDAuMSwwLjMsMC4yLDAuNSwwLjJjMC4xLDAsMC4zLDAsMC40LTAuMUMzOS41LDMyLjEsMzkuNSwzMS43LDM5LjMsMzEuNHoiLz4KPHBhdGggZmlsbD0iI0M3QTdGRiIgZD0iTTI5LDIzYy0xLjItMS40LTMtMi4yLTQuOC0yLjJjLTEuOCwwLTMuNiwwLjgtNC44LDIuMmMtMC41LDAuNS0wLjQsMS4zLDAuMSwxLjhjMC41LDAuNSwxLjMsMC40LDEuOC0wLjEgIGMxLjUtMS43LDQuMy0xLjcsNS44LDBjMC4zLDAuMywwLjYsMC40LDEsMC40YzAuMywwLDAuNi0wLjEsMC45LTAuM0MyOS40LDI0LjQsMjkuNSwyMy41LDI5LDIzeiIvPgo8ZWxsaXBzZSBmaWxsPSIjODY2N0M0IiBjeD0iMTEiIGN5PSIxMy41IiByeD0iMiIgcnk9IjEuNSIvPgo8L3N2Zz4 =」高さ= "40ピクセル" 幅= "40ピクセル">二维码设置\ n」は+++
            '</ div> \ n' + 
            '<DIV CLASS = "modal_header-item_1WbOm modal_header項目-close_4akWi"> \ n' + 
            '<DIV ID = "cameraCloseId"クラス= "クローズbutton_close-button_t5jqt近接button_large_2cCrv"> \ n」は+
            '<IMGクラス= "クローズbutton_close-icon_ywCI5" SRC = "データ:画像/ SVG + XML、BASE64、PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjQ4IDcuNDgiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MnB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU + aWNvbi0tYWRkPC90aXRsZT48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIzLjc0IiB5MT0iNi40OCIgeDI9IjMuNzQiIHkyPSIxIi8 + PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMSIgeTE9IjMuNzQiIHgyPSI2LjQ4IiB5Mj0iMy43NCIvPjwvc3ZnPg =="> \ n' + 
            '</ div> \ n' + 
            '</ div> \ n'は+ 
            '<! - とのモーダルボックス部分 - > \ n「は+
            '</ div> \ n' + 
        のdocument.getElementById( 'cameraCloseId')。
            '<DIV CLASS = "modal_center"> \ n' + 
            '<! -内容部分- > \ n'は+ 
            '<DIV CLASS = "modal_center_content"> \ n' + 
            '<IFRAME SRC =' + httpUrl +」の高さ= "100%"幅= "100%" /> \ n」+ 
            '</ div> \ n' + 
            '</ div> \ n' + 
            '</ div>'; 
        modalDiv.innerHTML = modalBox。
        document.querySelector( '体')のappendChild(modalDiv)。

        //添加模态框关闭事件無し'; 
            document.querySelector( '体')のremoveChild(cameraEle)。
            cameraEle.style.visibility = '隠されました'; 
            cameraEle.style.display = 'なし'; 
            document.querySelector( 'ヘッド')のremoveChild(のdocument.getElementById( 'cameraCSSId'))。
            window.location.reload(); 
        }); 

    } 
</ SCRIPT>

  

おすすめ

転載: www.cnblogs.com/itzyz/p/11571478.html