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. 关于C转汇编（转自网上）

    ②在KILE软件的菜单中,选择Project-->Options for  Target 'Target 1',-->Listing选择Assembly code就能生产*.LST文件.在 ...

  2. 微软ASP.NET技术“乱谈”

    微软ASP.NET技术“乱谈” 2014新年了,顺手写的一点文字,主要谈谈我对当前微软ASP.NET技术的看法,比较随意,大伙儿随便看看吧. 1 当前微软Web平台技术全貌 从2002年发布.NET ...

  3. python基础知识3——基本的数据类型2——列表，元组，字典，集合

    磨人的小妖精们啊!终于可以归置下自己的大脑啦,在这里我要把--整型,长整型,浮点型,字符串,列表,元组,字典,集合,这几个知识点特别多的东西,统一的捯饬捯饬,不然一直脑袋里面乱乱的. 一.列表 1.列 ...

  4. SSRS动态设置文本框属性

    SSRS可以通过表达式动态设置文本框所有的属性,比如字体,字号,是否加粗,如下图所示: 汉字和数字英文字母占用的空间不一样,一个汉字占用两个数字和英文字母的空间,VB里有LENB取得字节数,这SSRS ...

  5. flexbox 的相关属性的运用

    若是用 JS 动态的添加 html 元素到有 flexbox 属性的元素上,那么渲染的时候 可能会有问题. CSS 代码如下: .display-flex { /* OLD: Safari, iOS, ...

  6. PHP抓取及分析网页的方法详解

    本文实例讲述了PHP抓取及分析网页的方法.分享给大家供大家参考,具体如下: 抓取和分析一个文件是非常简单的事.这个教程将通过一个例子带领你一步一步地去实现它.让我们开始吧! 首先,我首必须决定我们将抓 ...

  7. input[file]标签的accept=”image/*”属性响应很慢的解决办法

    转自:http://blog.csdn.net/lx583274568/article/details/52983693 input[file]标签的accept属性可用于指定上传文件的 MIME类型 ...

  8. dma_ops

    kernel中的dma缓存区管理层操作统一实现在  struct dma_map_ops 中: dma缓存区分配函数的具体实现参考: http://www.aichengxu.com/view/599 ...

  9. map创建JSONObject对象

    public static void mapToJSONObject(){ Map<String, Object> map = new HashMap<String,Object&g ...

  10. java 缓冲

    缓存主要可分为二大类: 一.通过文件缓存,顾名思义文件缓存是指把数据存储在磁盘上,不管你是以XML格式,序列化文件DAT格式还是其它文件格式: 二.内存缓存,也就是实现一个类中静态Map,对这个Map ...