O meu primeiro modal em PHP

[Frank K Hosaka]

Ao invés de usar a função alert( ) do Javascript, eu recebi a orientação de usar um modal. Eu já ouvi falar de modal, o problema é que o meu conhecimento em Javascript é bastante precário, eu não vi nenhuma chance de utilizar o modal no meu projeto.

Mas, enfim, eu tomei coragem e encontrei um pequeno código de modal no Google, How To Make a Modal Box With CSS and JavaScript (w3schools.com).

Apesar dele ser pequeno, ele tem muito CSS que não compreendo, assim eu fiquei apenas com dois CSS que eram necessários para o meu propósito.

Outra coisa que eu achei estranho é que o tutorial coloca o <script> na base da página e não no topo como eu faço. Eu coloquei no topo, e o código não funcionou. Isso me fez concluir que é necessário primeiro criar o elemento para depois o JavaScript decidir o que fazer. Mas isso não faz o menor sentido, pois todos os meus códigos <script> estão no topo e eles funcionam.

Finalmente, o meu primeiro código PHP que abraça a tecnologia CSS/JavaScript do modal:

 

<style>
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top:-70;
		 width: 50%;   height: 50%;   overflow: auto; }
.modal-content { background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 80%;}
</style>
<?php
echo "<button id='btnmodal'>Mais detalhes</button>";
for ($i=0;$i<=10;$i++) {echo "<br>frank esteve aqui";}
echo "<div id='divmodal' class='modal'>";
echo "<div class='modal-content'>";
$mensagem="<b>A mensagem de hoje é:</b>";
for ($i=2;$i<=10;$i++) {$mensagem=$mensagem."<br>$i elefantes";}
echo "$mensagem";
echo "</div></div>"
?>
<script>
btnmodal.onclick = function() {divmodal.style.display = "block";}
divmodal.onclick = function() {divmodal.style.display = "none";}
</script>

 

[Frank K Hosaka]

Consegui resolver o problema do <script>. Uma coisa é o JavaScript fazer auditoria do elemento (nesse caso o código tem que ficar na base da página) e outra coisa é o elemento chamar o JavaScript (nesse caso eu posso colocar o código no topo da página).

O código modificado ficou assim:

<style>
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; 
  		top:-70; width: 50%;   height: 50%;   overflow: auto; }
.modal-content { background-color: #fefefe; margin: auto; padding: 10px; 
		border: 1px solid #888; width: 80%;}
</style>
<script>
function ligamodal() {divmodal.style.display = "block";}
function desligamodal () {divmodal.style.display= "none";}
</script>
<?php
echo "<button id='btnmodal' onclick='ligamodal()'>Mais detalhes</button>";
for ($i=0;$i<=10;$i++) {echo "<br>frank esteve aqui";}
echo "<div id='divmodal' class='modal' onclick='desligamodal()'>";
echo "<div class='modal-content'>";
$mensagem="<b>A mensagem de hoje é:</b>";
for ($i=2;$i<=10;$i++) {$mensagem=$mensagem."<br>$i elefantes";}
echo "$mensagem</div></div>"
?>

 

Editado Maio 5, 2022 por Frank K Hosaka

[Frank K Hosaka]

Acabei de implementar a nova tecnologia no meu orçamento.php e deu tudo certo. Só que o meu <div> foi parar dentro de um <table>, o modal funciona, mas com um péssimo visual. Reeditei e coloquei o <div> para fora do <table>. No caso, eu não trabalhei com um <button> mas sim um <li> onde está o nome do cliente.

O menu é um horror, mas vou trabalhar para melhorar.