How to make an alert with animated echo?

Question

How to make an alert with animated echo?

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (1 votes)

3

How to make a more animated echo, I'm using the following PHP code, which contains a alert() of 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');
}

How to make this alert more animated? Put an effect, or even that (Sexy Alert Box)?

php javascript html css

asked by anonymous 04.02.2014 / 19:21

4 answers

Unit Tests on Android I can not make an onchange event to change a photo when we select the select field

score 4 · Answer 1

Issuing an alert () in javascript from an echo () in PHP is not a good practice and does not allow any kind of additional configuration, such as adding the effects you want.

The only advantage of the method you used is that redirection will only occur after alert () is closed, since it has modal behavior and therefore leaves the browser stopped while it is not being answered.

One solution that would allow a bit more customization would be to use, for example the jquery UI. As in the example:

<?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 } ?>

score 3 · Answer 2

Take a different approach, accumulating error messages, in an array for example and inserting in the desired location, be it an element in HTML or passing to javascript.

phpFiddle example in HTML message

phpFiddle example using a jQuery plugin for display

<?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;?>

...

score 2 · Answer 3

The ideal would be to make the message appear in a div and use animation libraries to show the text with a highlighting that draws the user's attention.

I use a animation library that I developed for create sequences of animation that have unusual visual effects that help a lot to attract the attention of the user precisely because they are unusual and so give a natural and professional touch.

See here this demo page . Click the links on the side to see each effect. Note especially the effects: Emphasize circle, Emphasize underline and Emphasize double-underline. These are the most useful to bring to the attention of the user.

I've also written this article to show you how to use draw users' attention to canvas-based animations and other HTML5 elements .

See also this video on a part of website that uses these effects. See more or less from 1m50s. Or go straight to a page on the site show the effects applied in practice .

score 1 · Answer 4

Are you using Bootstrap in your application? If so, take a look at Modal: link

This will look more beautiful than the simple alert, so Bootstrap brings a layout pattern to your application.

As a jQuery function, you can call the same tag. But this is more for Javascript than for PHP.