首页 > 代码库 > jquery之右下角消息提示框
jquery之右下角消息提示框
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: 10000; 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="http://www.mamicode.com/messager.css" rel="stylesheet" /> <script type="text/javascript" src="http://www.mamicode.com/jquery-1.7.1.js"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/不自动关闭消息" /> </div> </form></body></html>
参考地址：http://www.cnblogs.com/linyijia/p/3467109.html
jquery之右下角消息提示框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。