3

Como fazer um echo mais animado, estou usando o seguinte código PHP, que contém um alert() do Javascript:

session_start();
$credito = $_GET['credito'];
$soma = @$_SESSION['valor_total'] += $_GET['valor'];

if($soma > $credito){
    echo "<script type='text/javascript' language='javascript'>
    alert ('Desculpe, ultrapassou seu limite de crédito!');
    window.location.href='../../painel.php';
    </script>";
}else{
    header('Location: ../../painel.php');
}

Como deixar esse alerta mais animado? Colocar um efeito, ou até mesmo aquele (Sexy Alert Box)?

4 Respostas 4

4

Emitir um alert() em javascript a partir de um echo() em PHP não é uma boa prática e não permite nenhum tipo de configuração adicional, tal como adicionar os efeitos que você deseja.

A única vantagem do método que você utilizou é que o redirecionamento só ocorrerá depois que o alert() for fechado, já que o mesmo possui um comportamento modal e por isso deixa o navegador parado enquanto não é respondido.

Uma solução que permitiria um pouco mais de customização seria utilizar, por exemplo o jquery UI. Como no exemplo:

<?php
session_start();
$credito = $_GET['credito'];
$soma = @$_SESSION['valor_total'] += $_GET['valor'];

if($soma <= $credito){
    header('Location: ../../painel.php');
} else {
?>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Aviso</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#dialog" ).dialog({
      dialogClass: "no-close",
      autoOpen: false,
      show: 'fade',
      hide: 'fade',
      modal: true,

      buttons: [
        {
          text: "Retornar",
          click: function() {
           location.href='../../painel.php';
          }
        }
      ]
    });
  });
  </script>
</head>
<body>

<div id="dialog" title="Ocorreu um problema!">
  <p>Desculpe, ultrapassou seu limite de crédito!</p>
</div>


</body>
</html>

<?php } ?>
1
3

Faça uma abordagem diferente, acumulando as mensagens de erro, num array por exemplo e inserindo no local desejado, seja ele um elemento no HTML ou passando para o javascript.

  • exemplo no phpFiddle de mensagem no HTML
  • exemplo no phpFiddle usando um plugin jQuery para exibição

    <?php
    // ...
    $soma = 10;
    $credito = 5;
    if($soma > $credito){
        $erros[] = "mensagem de erro 1 ";
        $erros[] = "mensagem de erro 2";
    }else{
        //...header('Location: ../../painel.php');
    }
    ?>
    <html>
    ...
    <?php if( !empty($erros) ):?>
        <div id="erros">
            <h5>Corrija os erros abaixo</h5>
            <ul>
                <?php foreach ($erros as &$item): ?>
                <li><?php echo $item ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif;?>
    

    ...

2

O ideal seria fazer aparecer a mensagem em um div e usar bibliotecas de animação para mostrar o texto com um destaque que chame mais à atenção do usário.

Eu uso uma biblioteca de animação que desenvolvi para criar sequências de animação que tem uns efeitos visuais incomuns que ajudam muito a chamar à atenção do usuáro precisamente por serem incomuns e por isso dão um toque natural e profissional.

Veja aqui esta página de demonstração. Clique nos links do lado para ver cada efeito. Note em especial os efeitos: Emphasize circle, Emphasize underline e Emphasize double-underline. Estes são os mais úteis para chamar à atenção do usuário.

Também escrevi este artigo para mostrar como usar para chamar à atenção dos usuários com animações baseadas em canvas e outros elementos do HTML5.

Veja também este vídeo sobre uma parte de site que usa estes efeitos. Veja mais ou menos a partir de 1m50s. Ou então vá direto em uma página do site que mostra os efeitos aplicados na prática.

1

Você está utilizando Bootstrap na sua aplicação? Se estiver, dê uma olhada no Modal: http://getbootstrap.com/javascript/#modals

Isso ficará mais bonito que o simples alert, tirando que o Bootstrap traz um padrão de layout para sua aplicação.

Como é uma função do jQuery, você pode chamar pelas tag mesmo. Mas isso está mais para Javascript do que para PHP.

1
  • 2
    O Bootstrap não é tão necessário: assim como o jQuery ele facilita muito o desenvolvimento, mas deixa o site um tanto pesado - ainda mais só para uma simples página de erro. Isso pede mais uma reestruturação do site: AJAX ajudaria, por exemplo. Nesse caso valeria a pena usar Bootstrap. Commented 4/02/2014 às 18:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .