Dialog funciona solo para un elemento y no para el resto

[bienpiyao]

Iniciado por jsstoni

Los id de tu html deben ser unicos sin repetir.

Las clases si pueden ser repetidas.

Código HTML:

<div class="abrir">1</div>
<div class="abrir">2</div>
<div class="abrir">3</div>
<div class="abrir">4</div>
 

Código Javascript:

var dialog = document.querySelector('dialog');
var abrirDom = document.querySelectorAll('.abrir');
for (var i = 0; i < abrirDom.length; i++) {
    abrirDom[i].addEventListener('click', function() {
        dialog.showModal();
    });
}
 

Buenas de nuevo.

Gracias por tu código pero no funciona como deseo. Es decir, abre el dialog, pero siempre muestra la mismo info. Es decir, ahora sí que abre el dialog con cada foto que pincho, pero siempre muestra la mismo info, la de la primera foto.

He perdido la funcionalidad de la X. Ahora, cuando la pincho, el dialog no se cierra (no hace nada).

Gracias!!