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 제거해야합니다.