相比浏览器自带的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. Java最重要的21个技术点和知识点之JAVA集合框架、异常类、IO

    (三)Java最重要的21个技术点和知识点之JAVA集合框架.异常类.IO  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享 ...

  2. ganglia安装-yum

    centos6.6 x64 root用户 单机一台,集群中需要监控的安装客户端就可以了 Ganglia是UC Berkeley发起的一个开源集群监视项目,设计用于测量数以千计的节点.Ganglia的核 ...

  3. WPF 之 布局(三)

    六.DockPanel DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中.停靠面板其实就是在WinForm类似于Dock属性的元 素 ...

  4. 如何利用log4Net自定义属性配置功能记录完整的日志信息

    log4Net作为专业的log记录控件,对于它的强大功能大家一定不陌生.下面我将详细介绍如何利用其自定义属性,让日志信息更完整. 一,创建测试工程,log4Net组件可以自己从网上下载,也可通过Nug ...

  5. HTML常用标签和属性大全

    html标签< <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑 ...

  6. 1.4.1.Documents,Fields和Schema概述

    Documents,Fields和Schema概述 solr的基本前提是非常简单,你可以给它很多信息,然后可以向它提出问题,获取你想要的问题的信息.所有信息输入的地方就叫做索引或者更新.当你提出问题时 ...

  7. 跨平台轻量级redis、ssdb代理服务器(C++ 11编写)

    dbproxy 是我业余采用C++11编写的跨平台代理服务器(并使用lua和自己的网络库),以扩展系统负载,同时使用多个后端数据库,后端数据库支持redis和ssdb. 需要由用户自己编写lua脚本控 ...

  8. BeginInvoke、ThreadPool、Task三类异步方法的区别和速度比较

      速度(最快为1) 返回值 多参数 等待在时限内完成 超时后结束 ThreadPool.UnsafeQueueUserWorkItem() 1 非原生支持1 非原生支持 非原生支持3 不支持 Thr ...

  9. VS2013 支持python和nodejs

    一.在VS2013中,安装python的支持 1. http://pytools.codeplex.com/下载插件 2. https://www.python.org/download/下载Pyth ...

  10. Oracle 常用的SQL语法和数据对象

    一.数据控制语句 (DML) 部分 1.INSERT (往数据表里插入记录的语句) INSERT INTO 表名(字段名1, 字段名2, ……) VALUES ( 值1, 值2, ……);  INSE ...