Ir para conteúdo
Fórum Script Brasil
  • 0

O meu primeiro modal em PHP


Frank K Hosaka

Pergunta

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>

 

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

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 por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

  • 0

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.

 

Screenshot_20220505-071512_Samsung Internet.jpg

Screenshot_20220505-071308_Samsung Internet.jpg

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...