messager.js

(function (jQuery) {

    var window;

    var obj = new Object();

    obj.version = '@1.0';

    obj.title = '信息提示';

    obj.time = 4000;

    obj.anims = { 'type': 'slide', 'speed': 600 };

    obj.inits = function (title, text) {

        window = $('<div class="messager"><div class="messager-header"><div class="messager-close">×</div><div class="meaaager-title">'+title+'</div></div> <div class="messager-bottom"><div class="messager_content">'+text+'</div></div></div>')

        .appendTo('body')

        .hide();

        window.find('div.messager-close').click(function () {

            this.parentElement.parentElement.remove();

        });

    };

    obj.show = function (title, text, time) {

        if (title == 0 || !title) title = obj.title;

        obj.inits(title, text);

        if (time >= 0) obj.time = time;

        switch (this.anims.type) {

            case 'slide': window.slideDown(obj.anims.speed); break;

            case 'fade': window.fadeIn(obj.anims.speed); break;

            case 'show': window.show(obj.anims.speed); break;

            default: window.slideDown(obj.anims.speed); break;

        }

    };

    obj.anim = function (type, speed) {

        if (type != 0 && type) obj.anims.type = type;

        if (speed != 0 && speed) {

            switch (speed) {

                case 'slow':; break;

                case 'fast': obj.anims.speed = 200; break;

                case 'normal': obj.anims.speed = 400; break;

                default:

                    obj.anims.speed = speed;

            }

        }

    }

    jQuery.messager = obj;

    return jQuery;

})(jQuery);

messager.css

.messager

{

    position: absolute;

    background: #E0ECFF;

    border: 1px solid #95B8E7;

    z-index:;

    overflow: hidden;

    bottom: 0px;

    right: 0px;

    width: 200px;

    height: 100px;

}

.messager-header

{

    border:1px solid #fff;

    border-bottom:none;

    width:100%;

    font-size:12px;

    overflow:hidden;

    height:25px;

    color:#1f336b;

}

.messager-close

{

    float:right;

    padding:5px 0 5px 0;

    width:16px;

    color:red;

    font-size:12px;

    font-weight:bold;

    text-align:center;

    cursor:pointer;

    overflow:hidden;

}

.meaaager-title

{

    padding:5px 0 5px 5px;

    width:100px;

    text-align:left;

    overflow:hidden;

}

.messager-bottom

{

    padding-bottom:5px;

    border:1px solid #fff;

    border-top:none;

    width:100%;

    height:auto;

    font-size:12px;

}

.messager_content

{

    margin:0 5px 0 5px;

    border:#b9c9ef 1px solid;

    padding:10px 0 10px 5px;

    font-size:12px;

    width:183px;

    height:50px;

    color:#1f336b;

    text-align:left;

    overflow:hidden;

}

page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AlarmData.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="messager.css" rel="stylesheet" />

    <script type="text/javascript" src="jquery-1.7.1.js"></script>

    <script src="messager.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#showMessagerNoClose").click(function () {

                $.messager.show('不会关闭的消息', '要自己点关闭的X才可以哦！', 0);

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <input type="button" id="showMessagerNoClose" value="不自动关闭消息" />

    </div>

    </form>

</body>

</html>

　　

参考地址：http://www.cnblogs.com/linyijia/p/3467109.html

jquery之右下角消息提示框的更多相关文章

  1. 【WPF】屏幕右下角消息提示框

    WPF做一个仿QQ的右下角消息提示窗,网上找到几个Demo后,选了一个比较好用的. 博客 http://blog.csdn.net/huangli321456/article/details/5052 ...

  2. Jquery右下角消息提示框

    找了好久,终于找到一个不错的提示框jquery,免费给大家一起用下吧(可是花了我很多积分哦),顺便重写了一下样式,原来的样式真的不敢恭维啊... 下载地址:http://files.cnblogs.c ...

  3. jquery toastmessage （Jquery类似安卓消息提示框）

    Do you wanna have some toasts ? jquery-toastmessage-plugin is a JQuery plugin which provides android ...

  4. 基于jQuery消息提示框插件Tipso

    今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览   ...

  5. JS~Boxy和JS模版实现一个标准的消息提示框

    面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...

  6. PowerShe 消息提示框测试

    1. 使用powerShell 弹出一个简单的消息框,代码如下,创建test.ps1脚本文件. $ConfirmPreference = 'None' $ws = New-Object -ComObj ...

  7. 第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件

    jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...

  8. wpf实现仿qq消息提示框

    原文:wpf实现仿qq消息提示框 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details/5052 ...

  9. UWP中的消息提示框(二)

    在UWP中的消息提示框(一)中介绍了一些常见的需要用户主动去干涉的一些消息提示框,接下来打算聊聊不需要用户主动去干涉的一些消息提示框.效果就是像双击退出的那种提示框. 先说说比较简单的吧,通过系统To ...

随机推荐

  1. TCP协议疑难杂症全景解析

    说明: 1).本文以TCP的发展历程解析容易引起混淆,误会的方方面面2).本文不会贴大量的源码,大多数是以文字形式描述,我相信文字看起来是要比代码更轻松的3).针对对象:对TCP已经有了全面了解的人. ...

  2. nagios二次开发（一）---开发思想

    NAGIOS现状   从nagios的官网http://www.nagios.org/及其它已经公开的资料,我们可以知道:在web UI层nagios只提供了给我们查看图形界面的操作,界面上有简单的启 ...

  3. highchart访问一次后台服务返回多张图表数据

    本文承接上一篇,我们制作动态图表的时候,往往需要的不止一张图表,如果每张图表都与服务接口做一次交互的话未免太过频繁,这无论对前后还是后台都是一种压力,本文介绍一种一次访问返回多组数据的方式来减少前台与 ...

  4. Comet4J推技术在SSHE三大框架中应用-linux下亲测可用

    Comet4J(Comet for Java)是一个纯粹基于AJAX(XMLHTTPRequest)的服务器推送框架,消息以JSON方式传递,具备长轮询.长连接.自动选择三种工作模式. 下载地址 co ...

  5. ORM即 对象-关系映射（转自：微冷的雨）

    ORM即 对象-关系映射: 将数据库中的数据关系表,映射为实体对象. 灵动思绪EF(Entity FrameWork) 作者: 微冷的雨  来源: 博客园  发布时间: 2013-01-22 16:2 ...

  6. windbg学习---!thread和.thread

    !thread扩展显示目标系统中线程包括ETHREAD块在内的摘要信息.该命令只能在内核模式调试下使用 !thread [-p] [-t] [Address [Flags]] -p 显示拥有该线程的进 ...

  7. zTree入门-最简单的树

    最近发现项目中很多地方都是树形菜单,而这些树形菜单都是使用树形插件zTree来制作的,所以就想自学一下zTree,参照官方文档写了一个简单的案例,使用zTree做了 一个最简单的树形结构. 案例:zT ...

  8. jquery写插件

    http://www.cnblogs.com/ajianbeyourself/p/5815689.html

  9. Ruby-模块和类

    首先看下他们的关系 irb(main):100:0> String.class => Class irb(main):101:0> String.class.superclass  ...

  10. Spring Framework------>version4.3.5.RELAESE----->Reference Documentation学习心得----->Spring Framework中的spring web MVC模块

    spring framework中的spring web MVC模块 1.概述 spring web mvc是spring框架中的一个模块 spring web mvc实现了web的MVC架构模式,可 ...