Boa noite, estou criando um projeto, e o quero é o seguinte. Tenho uma tabela em que está apresento os dados, e ao clicar na ID, abre uma janela Modal com os dados detalhados.
O problema é o seguinte, ela só está abrindo no primeiro registro. Nos demais, não está abrindo.
Alguém sabe o que pode ser? Algum problema de PHP? ou é o JavaScript?
Segue abaixo o código(OBS: Não estou usando Bootstrap)
<?
//Arquivo Inicial.php irá¡ exibir o resultado das passagens efetuadas.
setlocale(LC_ALL,"pt_BR");
header('Content-type: text/html; charset=windows-1252');
set_time_limit(120); //Define tempo limite de execução.
ERROR_REPORTING (E_ERROR);
//include_once "../UTILS/gerenciaSistema.php";
include "../UTILS/conexao.php";
$dataAtual = date("Y-m-d");
?>
<html>
<head>
<title>Sistema Administrativo CETEC78</title>
<link rel="stylesheet" type="text/css" href="../CSS/adm.css"/>
</head>
<script type="text/javascript">
//futuras funções JavaScript
</script>
<!--Corpo da página-->
<body>
<div class="field_inc">
<fieldset>
<p>Sistema Administrativo - CETEC78 </p>
<p> </p>
</fieldset>
</div>
<div class="atividades">
<h2>Administração de usuários </h2><br>
<table>
<tr>
<th>ID </th>
<th>Login Caixa </th>
<th>Nome Completo </th>
<th>Nível</th>
</tr>
<!--Inserção dos dados do usuário-->
<?
//Cria as varíaveis que serão usadas para conexão.
SQL();
global $sql;
//Cria a consulta que será usada para exibir o resultado da tabela
$consulta = "SELECT [id],[usuario],[nome_completo]
,[nivel] FROM [Ocorrencias].[dbo].[tb_valida]";
//executa a consulta
$result = $sql->execute($consulta);
while(!$result->EOF) {
$id = $result->Fields['id']->Value;
$usuario = $result->Fields['usuario']->Value;
$nome_completo = $result->Fields['nome_completo']->Value;
$nivel = $result->Fields['nivel']->Value;
//Exibie o resultado da consulta
echo "
<tr>
<td><a href='#myModal$id' id='modalAnchor'>$id</a></td>
<td>$usuario</td>
<td>$nome_completo</td>
<td>$nivel</td>
</tr>
";
?>
<!-- The Modal -->
<div id="myModal" class="modal"> ';
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Dados do usuário</h2>
</div>
<div class="modal-body">
<br><br>
<form accept-charset='ISO-8859-1' method='post' action="admUsrSisOco.php">
<input type="hidden" name="usrId" value="<?PHP echo $id; ?>">
<p class="dataUser">Login caixa:
<input type="text" value="<?PHP echo $usuario; ?>" name="usrUser">
</p>
<p class="dataUser">Nome:
<input type="text" value="<?PHP echo $nome_completo; ?>" name="usrName">
</p>
<p class="dataUser">Nível:
<input type="text" value="<?PHP echo $nivel; ?>" name="usrLevel">
</p><br>
<p>
<button class="botaoG">Alterar usuário</button>
<button class="botaoG">Excluir usuário</button>
</p>
<br><br>
</form>
</div>
<div class="modal-footer">
<h3>CGR-Governança</h3>
</div>
</div>
</div>
<?
$result ->MoveNext();
}
?>
</table>
</div>
<br><br>
<button onClick="window.location.reload();" class="botaoG">Recarregar Página</button>
<br><br>
<script>
// Variável Modal
var modal = document.getElementById('myModal');
// Tag Anchor que abre o modal
var anchor = document.getElementById("modalAnchor");
// Elemento <span> que fecha o modal
var span = document.getElementsByClassName("close")[0];
// Quando clicar na ancora, abre o modal
anchor.onclick = function() {
modal.style.display = "block";
}
// Quando clicar no (x) fecha o modal
span.onclick = function() {
modal.style.display = "none";
}
// Clicando fora de qualquer parte do modal, também fecha.
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>