Tutorial que explica cómo mostrar una mensaje de alerta a los usuarios con jQuery y CSS similar a las alertas de Twitter, que descienden de la parte superior de la pantalla mostrando un mensaje.
Para que tengan una idea, nos referimos a los alertas de Twitter que se muestra en el siguiente video.
http://www.youtube.com/v/BbJeYdPRKXw
Código fuente del archivo html:
<?php session_start(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Twitter-like alert message</title> <style type="text/css"> body { background-color: #ccc; color: #000; padding: 30px; } #alert { overflow: hidden; width: 100%; text-align: center; position: absolute; top: 0; left: 0; background-color: #fff; height: 0; color: #000; font: 20px/40px arial, sans-serif; opacity: .9; } </style> </head> <body> <?php if (!empty($_SESSION['display'])) { echo '<div id="alert">' . $_SESSION['display'] . '</div>'; unset($_SESSION['display']); } ?> <form method="post" action="submit.php"> <label for="message">Message</label> <input type="text" name="message"> <input type="submit" value="Alert me!"> </form> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { var $alert = $('#alert'); if ($alert.length) { var alerttimer = window.setTimeout(function() { $alert.trigger('click'); }, 3000); $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function() { window.clearTimeout(alerttimer); $alert.animate({ height: '0' }, 200); }); } }); </script> </body> </html>
Código fuente del archivo submit.php:
$themessage = get_magic_quotes_gpc() ? stripslashes(trim($_POST['message'])) : trim($_POST['message']); $_SESSION['display'] = $themessage; header('Location: ' . $_SERVER['HTTP_REFERER']); exit; ?>
Ver el resultado final ó descargar el código fuente completo.