1

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.

1
  • Luis, si te ha servido mi respuesta, puedes marcarla como aceptada. Esto mantiene en orden y limpio el sitio. Saludos! Commented el 27 jul. 2017 a las 23:02

1 respuesta 1

3

Algo que puedes hacer es mandar un identificador en cada evento asociado a cada boton. En este caso yo le puse un "1" y un "2" como identificadores. De esta manera, puedes reusar la misma función para cualquier cantidad de botones. Esta es tan solo una forma que se me ocurre para hacerlo con el minimo de cambios a tu código. Espero te sirva. Saludos!

function uno(_valor,id){
    if(id==1)
        document.getElementById("modal_uno").style.display=_valor;
    else
        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',1)">Click me</button>
        <button onclick="uno('flex',2)">Click me</button>
        <div id="modal_uno">
            <div class="contenido_modal">
                <button onclick="uno('none',1)">Cerrar</button>
                Modal 1
            </div>
        </div>
        <div id="modal_dos">
            <div class="contenido_modal">
                <button onclick="uno('none',2)">Cerrar</button>
                Modal 2
            </div>
        </div>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.