複数のページがjsを呼び出すのを容易にするポップアップウィンドウをカプセル化します。

パッケージ：

/ * * 
 *確認とキャンセルを伴う
 ポップアップウィンドウ* @param content pop-up content 
 * @param btnokボタンを表示するかどうか
 * @param btncanel 
 * @param btnCallBackクリックボタンのコールバック関数、true / false 
 * / 
function popup（content、btnok、 btncanel、btnCallBack）{ 
    let btnOkShow = "block" ; 
    let btnCanelShow = "block" ;
     if（null == btnok || "" == btnok）{ 
        btnOkShow = "none" ; 
    } 
    if（null == btncanel || " "== btncanel）{ 
        btnCanelShow =" none " ; 
    }
    let str = '<div id = "tipDialog" class = "dialogBack" data-tag = ""> \ n' + 
        '<div class = "tck"> \ n' + 
        '<div class = "topDiv"> \ n '+ 
        ' <div class = "topnum"> \ n '+ 
        ' <img src = "../../ assets / US / icon / tips.png" alt = "">提示\ n '+ 
        ' < / div> \ n '+ 
        ' <img class = "closeIm" src = "../../ assets / US / buttons / close.png" id = "closeTip" alt = ""> \ n '+ 
        ' < / div> \ n '+ 
        ' \ n '+ 
        ' <div class = "contenT"> <div id = "dialogContent" class = "sc"> '+ content +' </ div> </ div> \ n '+ 
        ' <div class = "but1"> \ n '+
        '<input id = "sureButton" style = "display：' + btnOkShow + '" type = "button" class = "btn1" value = "' + btnok + '"> \ n' + 
        '<input id = "cancleButton "style =" display： '+ btnCanelShow +' "type =" button "class =" btn2 "value =" '+ btncanel +' "> \ n '+ 
        ' </ div> \ n '+ 
        ' </ div> \ n '+ 
        ' </ div> ' ; 
    $（ "body" ）.append（str）; 
    str1 = document.querySelector（ '。dialogBack' ）; 
    str1.style.display = "ブロック" ; 
    $（ "#closeTip"）。click（function （）{ 
        $（ "#tipDialog" ）.remove（）;
         if（null！= btnCallBack）{ 
            btnCallBack（false 
        } 
    }）
    $（ "#sureButton"）。click（function （）{ 
        $（ "#tipDialog" ）.remove（）;
         if（null！= btnCallBack）{ 
            btnCallBack（true ）; 
        } 
    }）
    $（ "#cancleButton"）。click（function （）{ 
        $（ "#tipDialog" ）.remove（）;
         if（null！= btnCallBack）{ 
            btnCallBack（ false ）; 
        } 
    }）
}

電話：

  ポップアップ（「削除してもよろしいですか？」、「OK」、「キャンセル」、関数（結果）{
           if （結果）{ 
             console.log（ 1）// クリックして操作方法を確認 
          } else { 
              console.log（ 2 ）// メソッドを動作させるために、キャンセルをクリック
            } 
      ）}    

スタイル：

.dialogBack { 
    position：fixed ; 
    幅：100％ ; 
    高さ：100％ ; 
    上：0 ; 
    左：0 ; 
    z-index：1999 ; 
    背景：rgba（0、0、0、0.6） ; 
} 

.tck { 
    width：62％ ; 
    background-color：#fff ; 
    text-align：center ; 
    align-content：センター ; 
    位置：固定 ; 
    font-family：'SimHei'、serif ; 
    左：20％ ; 
    上：25％ ; 
    色：＃393937 ; 
} 

.topDiv { 
    高さ：37％ ; 
    幅：100％ ; 
    ディスプレイ：フレックス ; 
    align-items：center ; 
    justify-content：space-between ; 
}

.closeIm { 
    width：45px ; 
    高さ：40px ; 
    margin-right：40px ; 
} 

.topnum { 
    高さ：100％ ; 
    幅：100％ ; 
    ディスプレイ：フレックス ; 
    justify-content：center ; 
    align-items：center ; 
    line-height：89px ; 
    font-size：2.6rem ; 
    マージン左：30px ; 
    padding-top：17px ;
    / * 位置：相対; * / 
} 

.topnum img {
     / * position：absolute; * / 
    / * 左：159px; * / 
    / * 上：26px; * / 
    幅：45px ; 
    高さ：45px ; 
    margin-right：10px ; 
} 

.sc { 
    width：80％ ; 
    色：＃202020 ; 
    行の高さ：36px ; 
    font-size：2.6rem ; 
    text-align：center ; 
    マージン：25px 0 ; 
} 

.contenT { 
    幅：100％ ; 
    ディスプレイ：フレックス ; 
    justify-content：center ; 
    align-items：center ; 
} 
.but1 { 
    height：145px ; 
    ディスプレイ：フレックス ; 
    justify-content：センター ; 
    align-items：center ; 
} 

.btn1 { 
    width：36％ ; 
    身長：42％ ; 
    font-size：1.8rem ; 
    background-color：＃e5e5e5 ; 
    色：＃222222 ; 
    ボーダー：なし ; 
} 

.btn2 { 
    width：36％ ; 
    身長：42％ ; 
    margin-left：29px ;
    font-size：1.8rem ; 
    background-color：＃202020 ; 
    色：#fbfbfb ; 
    ボーダー：なし ; 
}

上記は私がカプセル化したマスクポップアップウィンドウスタイルです。