jQuery插件css3动画模拟confirm弹窗

相比浏览器自带的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
 
接下来就是调用方法,先看看漂亮的效果吧:
jQuery插件css3动画模拟confirm弹窗

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

//参数是1个,参数为信息内容
                $.confirm('我是漂亮的confirm弹窗');
                jQuery插件css3动画模拟confirm弹窗

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

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

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

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

还有:

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

上一篇:性能测试四:jmeter进阶之逻辑控制器


下一篇:input 标签实现带提示文字的输入框