jQuery插件css3动画模拟confirm弹窗

浏览数：57 / 时间：2015年06月09日

相比浏览器自带的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（源码没有压缩，欢迎交流探讨学习）