I'm putting together a page that, when doing a search in the database, returns a table with the found data. In this table a td brings a link and passes a record at the same time. Clicking on the link should open a modal but it is not working. When I open my page it opens the direct mode without clicking on the link. Please help me: (
script within html:
$(document).ready(function(e) {
if($.cookie('modal') !== undefined){
$('#modal').css('display','none');
}
$('.pagina').click(function(){
$('#modal').fadeIn(1000);
});
$('.fechar, #modal').click(function(event){
window.location.reload();
if(event.target !== this){
return;
}
$('#modal').fadeOut(500);
$.cookie('modal', '1', { expires: 7 });
});
});
CSS:
#modal{ background:rgba(0,0,0, 0.5); width:100%; height:100%; position:fixed; left:0; top:0; }
.modal-box{ background:#FFF; width:100%; height:600px; position:static;}
.fechar{ padding:5px 10px; border:1px solid #CCC; position:absolute; right:3px; top:3px; border-radius:7px; color:#CCC; cursor:pointer;}
.fechar:hover{ color:#666; border-color:#666;}
My div that should open the modal:
<div id="modal">
<div class="modal-box">
<div class="modal-box-conteudo"></div>
<div class="fechar">X</div>
</div>
</div>
And the table generated in php:
echo "<tbody>";
echo "<tr>";
echo "<td>"; echo "<a href=\"#".$dados['nu_sequencial']."\" class=\"pagina\">Ver Grafico</a><br />"; echo "</td>";
echo "<td>"; echo "$dados[uf]<br />"; echo "</td>";
echo "<td>"; echo "$dados[municipio]<br />"; echo "</td>";
echo "<td>"; echo "$dados[dt_ano]<br />"; echo "</td>";
echo "<td>"; echo "$dados[candidato]<br />"; echo "</td>";
echo "<td>"; echo "$dados[candidatou]<br />"; echo "</td>";
echo "</tr>";
echo "</tbody>";