Buen dia. Sucede que he querido aprender a crear modales usando solo HTML, CSS y JavaScript sin el uso de ningún framework o librería. He visto algunos métodos, pero me gustó mucho este, es bastante útil y adaptable. El punto es que he estado leyendo este código y hay una parte que no entiendo(código Js) y es la parte de los if en la función createCustomElement(la segunda función), el código esta comentado con la zona de las dudas y cuales son. Les agradecería enormemente si me regalan una explicación clara de esa parte. Fuente: https://www.youtube.com/watch?v=86f4Qf0gxjo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>probando el modal de Edteam</title>
<style>
.ed-modal-container {
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 10px;
width: 100%;
margin-left: -0.5rem;
height: 100vh;
display: flex;
}
.ed-modal-container::before {
position: absolute;
content: "X";
color: #ffffff;
top: 1rem;
right: 1rem;
font-size: 2rem;
}
.ed-modal-content {
background: #ffffff;
width: 90%;
max-width: 1000px;
margin: auto;
text-align: center;
}
</style>
</head>
<!--Codigo HTML-->
<body>
<h1 id="show-modal">Presione aca para mostrar el modal</h1>
</body>
<script>
//Añadir un objetivo de atributos a un elemento
const addAttributes = (element, attrObj) => {
for (let attr in attrObj) {
if (attrObj.hasOwnProperty(attr)) element.setAttribute(attr, attrObj[attr])
}
};
//Crear elemento con atributos e hijos (inician las dudas)
const createCustomElement = (element, attributes, children) => { //no me queda muy claro el manejo del parametro "children"
let customElement = document.createElement(element);
if (children !== undefined) children.forEach(el => { //"children !== undefined" quiere decir, si existe un hijo?
if (el.nodeType) { //no me queda claro
if (el.nodeType === 1 || el.nodeType === 11) //y mi mayor duda es esta parte
customElement.appendChild(el); //aca algo de duda tengo
} else {
customElement.innerHTML += el;
}
});
addAttributes(customElement, attributes);
return customElement;
}
//imprimir modal
const printModal = (content) => {
//crear contenedor interno
const modalContentEl = createCustomElement("div", {
id: "ed-modal-content",
class: "ed-modal-content"
}, [content])
//crear contenedor principal
const modalContainerEl = createCustomElement("div", {
id: "ed-modal-container",
class: "ed-modal-container"
}, [modalContentEl]);
//imprimir modal
document.body.appendChild(modalContainerEl)
//Remover el modal
const removeModal = () =>
document.body.removeChild(modalContainerEl);
modalContainerEl.addEventListener("click", e => {
console.log(e);
if (e.target === modalContainerEl) removeModal();
})
}[introducir la descripción del enlace aquí][1]
let showModal = document.getElementById("show-modal");
showModal.addEventListener("click", () => {
printModal(`<h1>aprendiendo a crear modales con js</h1>`)
})
</script>
</html>