inativo [Dúvida] Modal JS e PHP

[Hemptt]

Seguinte, eu quero que quando o cliente clique no link/button "Detalhes" abra um modal do produto especifico no qual ele clicou, eu já fiz o JS certinho, porém não estou conseguindo fazer com que exista um modal para cada produto, ele defini um modal para todos produtos...

<section class="shop">
<?
  				//buscar todos produtos do banco de dados
				while ($idregistros = mysqli_fetch_array($busca)) {
					$codigo = $idregistros[0];
					$nome = $idregistros[1];
					$valor = $idregistros[2];
					$categoria = $idregistros[3];
					$img = $idregistros[4];
					$desct = $idregistros[5];

                  	// formatação para vitrini da loja
					echo "<article class=\"itemprod\">";
					echo "<p class=\"nomeprod\">$nome</p>";
					echo "<img src=\"$img\">";
					echo "<p class=\"descprod\">$desct</p>";
					echo "<p class=\"precoprod\">R$ ".number_format($valor, 2, ',', ' ')."</p>";
					echo "<button onclick=\"abrirModal()\" class=\"detalhesprod\">Detalhes</button>";
					echo "<a class=\"btncomprar\" style=\"cursor: pointer;\" href=\"PHP/carrinho.php?acao=add&id=$codigo\"><button class=\"botaocomprar\">Comprar</button></a>";
					echo "</article>";

                  	//modal que n consigo arrumar
					echo "<div class=\"bgmodal\" id=\"modal\">";
					echo "<div class=\"modal\">";
					echo "<span class=\"close\" onclick=\"fecharModal()\"><i class=\"fas fa-window-close fa-lg\"></i></span>";
					echo "$codigo";
					echo "$nome";
					echo "</div>";
					echo "</div>";
				}
					mysqli_close($conexao);
?>
		</section>
		<!-- JS para o modal -->
		<script type="text/javascript">
			function abrirModal(){
				document.getElementById('modal').style.top = "0";
			}
			function fecharModal(){
				document.getElementById('modal').style.top = "-100%";
			}
		</script>

 

O link do vídeo abaixo é a demonstração do problema...

https://youtu.be/2W5E2vW_2qM

Não reparem na música do vídeo k

Editado Maio 12, 2019 por Hemptt
a

[DigitalZero]

então man, a melhor forma é vc ter um modal só e trocar o conteúdo do modal de acordo com o produto selecionado

[Hemptt]

Em 15/05/2019 em 16:49, DigitalZero disse:

então man, a melhor forma é vc ter um modal só e trocar o conteúdo do modal de acordo com o produto selecionado

Então, eu n sei como irei fazer isso ainda k, preciso de ajuda...

[zAryon]

Seguindo a resposta do DigitalZero, pode ser interessante que você utilize um Vue.js para criar essa alteração (JS).

Mas caso você queira fazer de uma maneira manual, vai ser adicionando uma div de modal para cada um item específico na página, e em vez de ali no JS abrir a div 'modal', vai abrir uma específica que você criar.

[Visitante]

Seu tópico está sendo avisado de Inatividade. Caso não haja respostas em 7 dias, ele será fechado.

OBS: Essa mensagem é automática.

[Visitante]

Seu tópico foi marcado como Inativo. Para reverter está ação, entre em contato com a equipe de Moderação.

OBS: Essa mensagem é automática.