javascript - 带有js css和html的多个模态窗口

Question

我正在制作多个模态窗口，尽管我在重复自己。如果我能看到一种不同的 javascript 方法以使其更简洁，我肯定会很感激。当我是忍者时，我会支付它......

提前致谢。这是我的jsfiddle。我创建了两个模态、两个掩码和两个模态内容区域。我还创建了一个 img 链接和一个按钮链接。每个模态分别一个。我想使用该功能打开任何模态窗口.....

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当用户单击“关闭”时，您必须删除。