Question

我想在用户第一次访问应用程序顶部时设置一条警告消息，并在用户解除之前一直存在。

我对jQuery有点新鲜，但我想将它用于此。 jQuery是否有一些内置的方法用于此类事情？理想情况下，我希望它是一个即时动作，而不是形式变量。

我的应用是基于PHP的WordPress插件。

Answer 1

您可以按照这些教程中的步骤创建类似Twitter的提醒。

<强> CSS：

#alert
{
    overflow: hidden;
    z-index: 999;
    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;
}

<强>的jQuery

检查是否使用setTimeout在3秒后折叠警报如果未设置line-height，则将警报扩展为CSS line-height或50px 如果用户在3秒之前单击警报，请提前折叠警报

$(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);
        });
    }
});

将CSS和jQuery放在HTML页面中

有些注意事项：

第1行：使用PHP打开会话第13行：我们的警报CSS 第30行：如果$ _SESSION ['alert']存在（在步骤2中的submit.php中设置）第40行：使用Google托管的jQuery 第42行：有我们的警报jQuery

<?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="http://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>

使用PHP将警报添加到$ _SESSION

将此文件另存为submit.php

<?php
session_start();

$themessage = get_magic_quotes_gpc() ?
    stripslashes(trim($_POST['message'])) :
    trim($_POST['message']);

$_SESSION['display'] = $themessage;

header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;
?>

它将创建类似于此的东西 http://www.youtube.com/watch?v=BbJeYdPRKXw&feature=player_embedded

如果您对代码有任何疑问，请在下面进行评论，我想这就是您所需要的。

致记： http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/ http://www.achari.in/create-twitter-alert-style-using-jquery-js-and-css

Answer 2

您可以使用localStorage来控制何时关闭该框以不再显示该框。对于不支持localStorage的浏览器（如果你关心的话），请使用无限期的cookie。

Answer 3

alert('Yo, click me');

使用cookie和/或会话变量来确定是否应该发出警报。

具有用户定义持久性的jQuery警报消息？

3 个答案: