Estoy usando el siguiente código para que aparezca la pantalla:
<div id="create_phase{{ forloop.counter }}" class="w3-modal" onclick="this.style.display='visible'">y el siguiente código a la pantalla oculta:
<a onclick="document.getElementById('create_phase{{ forloop.counter }}').style.visibility = 'hidden'">X</a>Funciona bien, pero no puedo hacer que la pantalla vuelva a aparecer después de ocultarla.
¿Alguna sugerencia?
Como dijo Laif en los comentarios, los espacios en sus identificaciones no son una buena idea. Creo que la mejor solución es usar ID con convenciones de nomenclatura adecuadas con las que el DOM funciona bien.
Pero una posible solución (hacky) podría ser el prefacio de los espacios en su llamada getElementById con \ para escapar de ellos correctamente.
Aquí hay un CodePen: https://codepen.io/milofultz/pen/KKvGJbJ
Debe dar a sus ID nombres propios (no pueden tener espacios), tal como está ahora, su div en realidad tiene 3 ID separadas.
y necesita cambiar .style.visibility = 'visible' , a .style.visibility = 'hidden' ya que su código original no está modificando el mismo estilo.
<div id="ele1" class="w3-modal" onclick="this.style.visibility='hidden'"> test </div> <a onclick="document.getElementById('ele1').style.visibility = 'visible'">X</a> Tenga en cuenta que en este fragmento tuve que invertir la forma en que intentaba ocultar y mostrar contenido en el original, porque no se puede hacer clic en un elemento oculto , si desea poder hacer clic en él. Yo usaría opacity en su lugar, así:
<div id="ele1" class="w3-modal" onclick="this.style.opacity=100"> test </div> <a onclick="document.getElementById('ele1').style.opacity=0">X</a>