Jquery 网站保存信息提示消息实现,提示后自动消失

现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用alert提示消息,采用jQuery提示完消息,自动消失

css

<style>
    #tip_message {
        z-index: 9999;
        position: fixed;
        left: 0;
        top: 40%;
        text-align: center;
        width: 100%;
    }

    #tip_message span {
        background-color: #03C440;
        opacity: .8;
        padding: 20px 50px;
        border-radius: 5px;
        text-align: center;
        color: #fff;
        font-size: 20px;
    }

    #tip_message span.error {
        background-color: #EAA000;
    }
</style>

javascript代码如下:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        //提示成功信息
        ShowSuccessMessage = function(message, life) {
            var time = 3000;
            if (!life) {
                time = life;
            }

            if ($("#tip_message").text().length > 0) {
                var msg = "<span>" + message + "</span>";
                $("#tip_message").empty().append(msg);
            } else {
                var msg = ‘<div id="tip_message"><span>‘ + message + "</span></div>";
                $("body").append(msg);
            }

            $("#tip_message").fadeIn(time);
            $("#tip_message").fadeOut(time);

        };

        //提示错误信息
        ShowErrorMessage = function(message, life) {
            ShowSuccessMessage(message, life);
            $("#tip_message span").addClass("error");
        };

        ShowSuccessMessage("Hello success!", 1000); // 第二个参数life是指消息显示时间
        //ShowErrorMessage("Hello error!", 1000);
    });

</script>
时间: 2024-11-08 14:04:48

Jquery 网站保存信息提示消息实现,提示后自动消失的相关文章

Axure实现提示文本单击显示后自动消失的效果

方法/步骤 如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失.   首先在“属性面板”的交互中,选择“载入时”   在“载入时”用例编辑中,隐藏tooltip,上面的事件无需理会,是另外一个交互事件   再选择要单击的元件,事件选择“鼠标单击时”   先给tooltip增加第一个事件,逐渐显示.   通过“其他”-“等待”,修改等待时间,实现显示2s的效果.   继续选择“显示-隐藏”,这次可见性改成隐藏,如果动画

iOS用户点击推送消息进入应用后自动跳转到对应的ViewController

当iOS用户通过点击推送消息进入应用时,在AppDelegate的 - (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions 我们可以通过 NSDictionary* remoteNotification = [launchOptions objectForKey:UIApplicationLaunchOptionsRemoteNotific

jquery 提示信息显示后自动消失的具体实现

方法一: 复制代码 代码如下: $("#errormsg").html("您的信息输入错误,请重试!").show(300).delay(3000).hide(300); 方法二: 复制代码 代码如下: $("#errormsg").html("ok").hide(3000);// 这个是渐渐消失 $("#errormsg").html("ok").fadeTo(3000).hide()

jQuery在HTML文档加载完毕后自动执行某个事件;

原来onchange=“fucntionname(parms)”: 1 <select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, 'selProvinces_{$sn}')" style="border:1px solid #ccc;"> 2 <option value="0">{

一款基于jquery超炫的弹出层提示消息

今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class='b'> </div> <div class='bb'> </div> <button id='go'> GO </button> <div class='message'> <div class

jquery提示消息,简单通用

jquery提示消息.简单通用 function showTips(txt,time,status) { var htmlCon = ''; if(txt != ''){ if(status != 0 && status != undefined){ htmlCon = '<div class="tipsBox" style="width:220px;padding:10px;background-color:#4AAF33;border-radius:

JQuery弹出提示框定时自动消失

运行效果: 用div而非setTimeout(),在页面中央显示提示,1.5秒后消失,不影响页面的正常布局. 1. HTML代码 HTML代码显示提示内容,放在页面中任何位置. <div class="alert"></div> 实际运行中其它居中参考 <div class="alert" style="height:50px;line-height:50px;font-size:14px;width:65%;margin:a

Qt 实现桌面右下角消息弹窗提示

简单的做了一个类似QQ消息提示的消息弹窗提示的小模块,便于在系统后台程序提示检测的信息,使用Qt开发,设计整体思路是做一个无框架的widget,自己实现标题栏和内容栏,添加了向上移出,自动消隐退出效果,窗体简单,模块结构便于以后进行扩展和移植,旨在显示文字信息,通过按钮操作与主程序进行通信,运行结果如图 一.弹窗主体部分 class widget 1 #include "widget.h" 2 3 #include "titlewidget.h" 4 5 #incl

jquery插件artTxtCount输入字数限制,并提示剩余字数

工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=