相比浏览器自带的alert、confirm,能力所及,我更喜欢所有的东西都是自定义:
首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js。
<link rel="stylesheet" href="css/WeiConfirm.css" />    —如果可以,可以自己修改UI
<script type="text/javascript" src="js/jquery.js" ></script>    —必须先引入jQuery
<script type="text/javascript" src="js/WeiConfirm.js" ></script>    —再引入插件js
 
接下来就是调用方法,先看看漂亮的效果吧:

上面图片效果调用用方法:
<script>
$(function(){
        $.confirm('我是漂亮的confirm弹窗,带css3动画哦',function(){
                $.confirm('你单击的确定')
        });
});
</script>
 
接下来详细说明参数不同时的调用效果:
默认—标题为:【温馨提示】
        —按钮分别为【确定】和【取消】
        —其他3个参数都为空,一共6个参数

//参数是1个,参数为信息内容
                $.confirm('我是漂亮的confirm弹窗');
               

//参数是2个,前一个为内容,后一个为点击【确定】后执行的函数
                $.confirm('我是漂亮的confirm弹窗',function(){
                    alert('点击确定执行的函数')
                });
               
                //参数是3个,第一个为内容,第二个为点击【确定】后执行的函数,第三个为点击【取消】后执行的函数
                $.confirm('我是漂亮的confirm弹窗',function(){
                    alert('点击确定执行的函数')
                },function(){
                    alert('点击取消后执行的函数')
                });
               
                //参数是4个,第一个为内容,第二个替换默认为【确定】的值,第三个为点击【“确定”】后执行的函数,第四个为点击【取消】后执行的函数
                $.confirm('我是漂亮的confirm弹窗','还是确定',function(){
                    alert('点击还是确定执行的函数')
                },function(){
                    alert('点击取消后执行的函数')
                });
               

//剩下就是参数为6个,不解释了,看下面,很好理解
                $.confirm('标题哈哈','内容哈哈','确定哈哈','取消哈哈',function(){
                    alert('你单击的是确定哈哈');
                },function(){
                    alert('你单击的是取消哈哈');
                });
            

兼容性:
    勉强兼容ie8,本来好的效果都没想过兼容IE,更别说ie6了。

插件下载:
http://pan.baidu.com/s/1gdFyPtp(源码没有压缩,欢迎交流探讨学习)

还有:

不知道代码写的好不好,希望大神能指正一下O(∩_∩)O嗯!

jQuery插件css3动画模拟confirm弹窗的更多相关文章

  1. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  2. jquery实现css3动画

    jquery animate改变元素样式时,只支持数字值的变化,比如width,height等,但是css3属性状态值很多都不是数字值,而是字符串和数字混合在一起,比如translate(), rot ...

  3. 使用CSS3动画模拟实现小球自由落体效果

    使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...

  4. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  5. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  6. 16款创建CSS3动画的jQuery插件

    jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...

  7. DrawSVG - SVG 路径动画 jQuery 插件

    jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...

  8. Minimit Anima – 硬件加速的 CSS3 动画插件

    Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件.基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery ...

  9. 让人心动的jQuery插件和HTML5动画

    1.jQuery/CSS3带表单的下拉菜单 今天要分享一款基于jQuery和CSS3的下拉菜单,这款jQuery下拉菜单非常特别,我们直接可以在下拉菜单中填写联系表单.登录表单.而且整个下拉菜单的外观 ...

随机推荐

  1. 浏览器显示本地照片 image

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. myecplise 打开报错 Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project 'myf'. Java.lang.NullPointerException

    Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project 'myf'.Java.l ...

  3. C# 使用代码来操作 IIS

    由于需要维护网站的时候,可以自动将所有的站点HTTP重定向到指定的静态页面上. 要操作 IIS 主要使用到的是“Microsoft.Web.Administration.dll”. 该类库不可以在引用 ...

  4. [JavaEE] 深入理解Struts2的ognl标签

    OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表达式语言,它通过简单一致的语法,可以任意存取对象的属性或者调用对象的方法,能够 ...

  5. CentOS安装VMware Tools

    新建cdrom挂载目录 mkdir /mnt/cdrom 挂载光驱 mount -t auto /dev/cdrom /mnt/cdrom这命令就是把CentOS CDROM挂载在/mnt/cdrom ...

  6. 1822: [JSOI2010]Frozen Nova 冷冻波 二分最大流

    1822: [JSOI2010]Frozen Nova 冷冻波 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 585  Solved: 175[Subm ...

  7. Differential Geometry之第一章欧式空间

    书籍:<微分几何>彭家贵 局部微分几何 第一章.欧式空间 1.1向量空间 (1)向量空间 a.向量空间是集合,集合中的元素需要定义加法和乘法运算.向量空间和n维数组空间R^n不是同一个概念 ...

  8. 第一个项目--用bootstrap实现美工设计的首页

    主要介绍在首页实现中用到bootstrap实现效果的地方. 实现如下的效果: <li> <div role="group" style="padding ...

  9. [CAMCOCO][C#]我的系统架构.服务器端.(四)----Model层 实体的自我验证

    这是Model的第二篇,上一篇点这里 这块完全是扒了@何镇汐大神博客里的教程实现的,在这之前完全没想到数据验证居然可以这样做!!在此表示严重感谢!!! 点击这里可以去了解这个方法的原理,老胡估计自己是 ...

  10. PHP动态函数

    header('Content-type:text/html;Charset=utf8'); function welcome(){ echo 'Welcome to you.'; } functio ...