javascript - js css と html を使用した複数のモーダル ウィンドウ

Question

繰り返しますが、複数のモーダルウィンドウを作成しています。これをより簡潔にするために、JavaScriptへの別のアプローチを見ることができれば、間違いなく感謝します。そして忍者になったら前払いする……。

前もって感謝します。ここに私のjsfiddleがあります。2 つのモーダル、2 つのマスク、および 2 つのモーダル コンテンツ領域を作成しました。imgリンクとボタンリンクも作成しました。各モーダルにそれぞれ 1 つ。関数を使用してモーダルウィンドウを開きたい.....

Answer 1

document.createElement新しいモーダルを動的に作成するために使用します。

function createModal(txt){
    var ele = document.createElement("div");
    ele.id = "modal";
    document.body.appendChild(ele);

    var mask = document.createElement("div");
    mask.id = "modalMask";
    mask.onclick = function(){
        ele.outerHTML = "";
    }
    ele.appendChild(mask);

    var inside = document.createElement("div");
    inside.id = "modalContent";
    inside.innerHTML = txt;
    ele.appendChild(inside);
}
createModal("Content here");


//do more stuff here

divまた、ユーザーが「閉じる」をクリックしたときに削除する必要があります。