先看下效果

js

jQuery.extend({

    prompt: function (text, type, times) {

        var prompt = $(['<div class="prompt ', type, '"><i></i><em>', text, '</em></div>'].join('')).appendTo('body');

        prompt.css('margin-left', -prompt.width()).fadeIn();

        setTimeout(function () {

            prompt.fadeOut(function () {

                prompt.remove();

            });

        }, times);

    }

});

css

.prompt {

  left: 50%;

  top: 50%;

  padding: 10px;

  width: auto;

  float: left;

  z-index:;

  display: none;

  position: absolute;

  border-radius: 3px;

}

.prompt i {

  background: url(../images/pic.png) no-repeat 0 0;

  display: block;

  width: 18px;

  height: 18px;

  float: left;

  margin-right: 5px;

}

.error {

  background-color: #FFE4E4;

  border: 1px solid #F6B9B9;

  color: #B94A48;

}

.warning {

  background-color: #FCF6D7;

  border: 1px solid #FED88F;

  color: #C09853;

}

.success {

  background-color: #DEF1D7;

  border: 1px solid #BFD3AF;

  color: #468847;

}

.success i {

  background-position: 0 -44px;

}

.warning i {

  background-position: 0 -70px;

}

.error i {

  background-position: 0 -16px;

}

.prompt em {

  font-style: normal;

  font: 14px/20px '宋体';

}

使用

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/prompt.beta.min.css" />

        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

        <script type="text/javascript" src="../js/prompt.min.js"></script>

        <script type="text/javascript">

            $(function () {

                $.prompt('命令未成功完成', 'warning', 5000);

                $.prompt('提交成功', 'success', 5000);

                $.prompt('提交失败', 'error', 5000);

            });

        </script>

    </head>

    <body>

    </body>

</html>

打包下载:下载

仿猪八戒一个提示(jQuery插件) v0.1 beta的更多相关文章

  1. 仿腾讯微博的一个弹出框 v0.1 beta

    仿腾讯微博的一个弹出框 v0.1 beta   代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...

  2. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  3. 一句代码美化你的下框之jquery.selectMM修复版（jquery.selectMM v0.9 beta 20141217)

    一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217) 浏览效果: http://www.beyond630.com/jqu ...

  4. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  5. 邮箱地址自动提示jQuery插件

    // mailAutoComplete.js v1.0 邮箱输入自动提示// 2010-06-18 v2.0 使用CSS class类代替CSS对象,同时增强代码可读性// 2010-06-18 v2 ...

  6. 发布一款仿天猫产品放大镜JQuery插件

    效果如下图: 1.原图 2.放大镜效果: 插件源码如下: /* * * JQUERY 简洁无极放大镜插件-zoomer * Author:盛世游侠 * QQ:418873053 * Date:2013 ...

  7. 如何制作一个类似jquery插件的vue插件

    vue拿来写插件,会不会太那啥? 请跟我念,"不会,符合业务需求才是你的老板最想要的." 如何封装一个可以全局调用的vue插件 其原理其实相当简单,通过new Vue(vueCom ...

  8. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

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

    工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

随机推荐

  1. AC自动机(Aho-Corasick automation)模板 HDU：2222

    #include <iostream> #include <cstdio> #include <cstring> #include <queue> us ...

  2. 关于DocumentCompleted事件

    关于DocumentCompleted事件,MSDN给出的解释是在文档加载完毕后执行,但是在我的程序中DocumentCompleted却被多次调用,查了一下资料,大概出现了以下几种情况. 1.Web ...

  3. How many ways?? - hdu2157（矩阵快速幂-模板）

    分析:求Map^k,刚开始没有用快速幂,TLE了   代码如下: =================================================================== ...

  4. Java 判断一段网络资源是否存在

    package cn.ycmedia.common.utils; import java.io.InputStream; import java.net.URL; import java.net.UR ...

  5. 九度OnlineJudge之1001：A+B for Matrices

    题目描述: This time, you are supposed to find A+B where A and B are two matrices, and then count the num ...

  6. Java之多线程断点下载的实现

    RandomAccessFile类: 此类的实例支持对随机訪问文件的读取和写入.随机訪问文件的行为相似存储在文件系统中的一个大型 byte 数组. 存在指向该隐含数组.光标或索引,称为文件指针.输入操 ...

  7. rpc远程过程协议调用

    在linux 5.X以及下的版本你可以通过service portmap status命令查看rpc是否启动.如果提示running,表示正在运行:如果提示stop就是关闭了.如果没有安装,则通过安装 ...

  8. qt 关于内存泄漏的检测

    Qt 关于内存泄露的检测: 收藏人:guitarhua     2012-02-10 | 阅:  转:    |   来源   |  分享               Qt 关于内存泄露的检测:工具篇 ...

  9. 微信支付bug

    1.最基本的操作就是检查各项参数正确2.确保将测试微信号加入测试白名单 3.目录正确:发起授权请求的页面必须是在授权目录下的页面,而不能是存在与子目录中.否则会返回错误,Android返回“Syste ...

  10. Java基础知识强化之IO流笔记09：File类功能

    详见如下: Android(java)学习笔记87:File类使用