先看下效果

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. Swap Nodes in Pairs——LeetCode

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  2. poj3258

    题目翻译 二分法(其实两个单词的意思分别是河,跳格子游戏,至于为啥翻译成二分法- -只能说英语博大精深啊) 奶牛每年举办一场有特色的跳格子游戏(很明显题目翻译错误)涉及到在河里从一块岩石跳到另一块岩石 ...

  3. Servlet的接口实现类

    Sun公司提供了两个默认实现类 GenericServlet和HttpServlet HttpServlet指能够处理Http请求的Servlet,它在原有的Servlet基础上添加了与HTTp相关的 ...

  4. Java调用R（三）_系统命令调用

    java通过配置的系统命令Rscript直接调用R脚本. 优点:R脚本和Java代码完全分离 缺点:R中变量不能控制 1. Java本地能够成功调用. public void CallR() { Ru ...

  5. pl sql developer登陆界面找不到oracle数据库选项

    window 64位的操作系统 装的数据库win64_11gR2的数据库,PL SQL是PLSQL Developer 7.1.5最后是下载了一个instantclient_11_2包将你数据库安装路 ...

  6. Hibernate三 关联关系

    Hibernate的关联映射 客观世界中很少有对象是独立存在的,比如我们可以通过某个老师获取该老师教的所有学生,我们也可以通过某个学生获得教他的对应的老师,实体之间的互相访问就是关联关系.在Hiber ...

  7. 在SQL中使用PL/SQL函数存在的问题

    -----------------------------Cryking原创------------------------------ -----------------------转载请注明出处, ...

  8. TextView的ems和MaxLength

    <EditText android:id="@+id/et_code" android:layout_width="wrap_content" andro ...

  9. 论C++与三国

    Scott Meyers曾说过,C++语言是一个语言联邦.C++包含面向过程,面向对象,泛型编程编程思想.现在C++11有加了一堆新特性,语言联邦更为庞大. 程序员们.常常挑起语言之争,甚至连大师级人 ...

  10. qt优点

    (1)优良的跨平台特性.  Qt支持下列操作系统:Microsoft Windows 95/98.Microsoft Windows NT.Linux.Solaris.SunOS.HP-UX.Digi ...