相比浏览器自带的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. c++ 设计模式1

    从面向对象谈起 1) 底层思维:向下,如何把握及其底层,从微观理解对象构造 (语言构造.编译转换.内存模型.运行时机制) 抽象思维: 向上,如何将我们的周围世界抽象为程序代码   (面向对象.组件封装 ...

  2. Android进阶笔记17:3种JSON解析工具(org.json、fastjson、gson)

    一. 目前解析json有三种工具:org.json(Java常用的解析),fastjson(阿里巴巴工程师开发的),Gson(Google官网出的),其中解析速度最快的是Gson. 3种json工具下 ...

  3. 怒刷DP之 HDU 1029

    Ignatius and the Princess IV Time Limit:1000MS     Memory Limit:32767KB     64bit IO Format:%I64d &a ...

  4. 剑指Offer30 从1到n整数出现1的个数

    /************************************************************************* > File Name: 30_NumerO ...

  5. IOS的一些尺寸

    iPhone或iTouch的宽为320像素,高为480像素, 状态栏高为20像素 toobar高为44像素 tabbar高为49像素 导航栏高为44像素 iphone分辨率参数 型号 屏幕尺寸 分辨率 ...

  6. Oracle数据库作业-6 查询“张旭“教师任课的学生成绩。

    23.查询"张旭"教师任课的学生成绩. select * from score s where cno in ( select cno from course where tno ...

  7. 洛谷P1251 餐巾(网络流)

    P1251 餐巾 15通过 95提交 题目提供者该用户不存在 标签网络流贪心 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 为什么我全部10个测试点都对… 题目描述 一个餐厅在相继的N天里 ...

  8. SharePoint - 添加图片到Survey的某一问题之上

    Survey是SharePoint常用功能之一,而曾经被用户多次问到的问题是能否在Survey的某一问题上添加图片,经过查看,SharePoint Survey不提供此方法,只得谷歌之,得一比较懒但又 ...

  9. 跟我一起玩转FineUI之嵌套表格

    最近一直在研究FineUI(http://www.fineui.com/),那么什么是FineUI呢,FineUI是基于 ExtJS 的专业 ASP.NET 控件库.创建 No JavaScript, ...

  10. How Old Are You?

    今天要分享的是一个测年龄的小应用,就类似是http://how-old.net官网测年龄的功能一样,我的也是这样一个功能,细节捕获当然没有how-old多啦,不过这些主要是基于一个第三方的jar包,我 ...