Modal windows Javascript

Question

Modal windows Javascript

Navigation

#1 by (2 votes)

1

I am trying to create, for example, several buttons and each one of them skips a popup.

But I do not know how to reuse the code for several buttons, so I create differences functions, and I think that when you rewrite the same code several times, something is wrong.

You could help me with code optimization.

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>

Basically it's what I want, for example, on a Component page of a company, because the button house triggers the curriculum of each member, for example.

javascript modal

asked by Luis Quesada Romero 20.07.2017 в 16:27

source

1 answer

Plugin eclipse subversive generates error and eclipse does not start How to show an image before ending an event? - C #

score 2 · Answer 1

Something you can do is send an identifier in each event associated with each button. In this case I put a "1" and a "2" as identifiers. In this way, you can reuse the same function for any number of buttons. This is just one way that I can think of to do it with the minimum changes to your code. I hope it helps you. Greetings!

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>