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

Um modal que suporta aspas simples, aspas duplas, e os dois ao mesmo tempo


Frank K Hosaka

Pergunta


 

<style>
.modal {display:none; position:fixed; background-color:lightgray; border:1px solid;top:100;left: 10;padding: 20px}
</style>

<script>
function modal(id) {
	var li = document.getElementsByTagName('li');
	divmodal.innerHTML=li[id].innerText;
	divmodal.style.display="block";}
</script>
<?php
$array=["meu nome é 'Joãoponês'",'meu nome é "Joãoponês"',"meu nome é 'João' \"Ponês\""];
$contagem=0;

foreach ($array as $element) {
	echo "<li onclick='modal($contagem)'>$element</li>"; $contagem++;}  

echo "<div id=divmodal onclick=divmodal.style.display='none' class=modal></div>";

Quando comecei a aprender a usar o modal, eu usava a função modal($mensagem) para pegar a informação do PHP para o JavaScript, só que essa função não funcionava quando a $mensagem tinha um aspas no meio do caminho. Eu pensei em transformar a $mensagem em hexadecimal, mas isso não deu certo pois o PHP usa dois bytes para representar uma caracter e o JavaScript usa um byte.

Hoje eu lembrei que o JavaScript é capaz de ler o HTML. Ou seja, ao invés do PHP mandar a informação para o JavaScript, bem mais simples é pedir para o JavaScript pegar a informação. Ou seja, eu só mudei o escopo da função, ao invés de função($mensagem) mudei para função($indicador).

Com essa abordagem, isso mudou a minha técnica de programação, eu pensei que era necessário dois grupos de <div> para conseguir um modal, mas basta ter apenas um par de <div> para o modal funcionar. Consegui reduzir todo o meu projeto em apenas dois pares de <div>, queria ter apenas um par de <div>, uma janela para mostrar o detalhe do cadastro da pessoa, a mesma janela para mostrar o detalhe do produto, a mesma janela para mostrar o plano de contas, e o meu desafio é usar a mesma janela para fazer o menu de navegação. Eu tentei usar o evento duplo clique, mas isso acabou atrapalhando bem mais do que ajudando - eu desisti da ideia, e acabei criando um novo par de <div> para botar o menu lá no topo da página. Para chegar até o topo da página eu uso o evento duplo clique.

Uma coisa bacana que eu consegui ontem foi a definição do estilo CSS, eu queria um para o notebook e outro para o celular. O PHP é capaz de mudar o estilo no meio do caminho, mas não quando o estilo é definido na forma de classe, ou seja, quando vem com aquele ponto e descrição. Assim o melhor é usar o PHP na hora de definir o CSS, e não depois. Finalmente, estou agrupando todas as funções do Javascript num só arquivo bem como o estilo CSS, que tem o nome de menu.php. Os outros códigos só tem o trabalho de incluir, sem correr o perigo de bagunçar a estrutura do HTML. Separar o estilo e o JavaScript é necessário para evitar de um tag <meta> acabar perdido no meio do <body>, quando o lugar dele é lá no <head>.

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

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,2k
    • Posts
      651,9k
×
×
  • Criar Novo...