Estoy intentado crear por ejemplo varios botones y cada uno de ellos salte un popup.
Pero no se como reutilizar el código para varios botones, por lo tanto creo diferencias funciones, y creo que cuando en codigo reescribes lo mismo varias veces, algo estas haciendo mal.
Me podríais ayudar con la optimización del código.
function uno(_valor){
document.getElementById("modal_uno").style.display=_valor;
window.onclick = function(event) {
if (event.target == modal_uno) {
modal_uno.style.display = "none";
}
}
}
function dos(_valor){
document.getElementById("modal_dos").style.display=_valor;
window.onclick = function(event) {
if (event.target == modal_uno) {
modal_uno.style.display = "none";
}
}
}
#modal_uno, #modal_dos{
background: rgba(0,0,0,0.8);
display:none;
flex-direction: column;
justify-content:center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
}
.contenido_modal {
padding: 40px;
background: red;
display: flex;
flex-direction: column;
justify-content:center;
align-items: center;
}
<div>
<button onclick="uno('flex')">Click me</button>
<button onclick="dos('flex')">Click me</button>
<div id="modal_uno">
<div class="contenido_modal">
<button onclick="uno('none')">Cerrar</button>
Modal 1
</div>
</div>
<div id="modal_dos">
<div class="contenido_modal">
<button onclick="dos('none')">Cerrar</button>
Modal 2
</div>
</div>
</div>
Básicamente es lo que quiero por ejemplo en una página de Componente de una empresa, pues casa botón dispare el curriculum de cada miembro, por ejemplo.