首页 > 代码库 > jQuery插件css3动画模拟confirm弹窗
jQuery插件css3动画模拟confirm弹窗
相比浏览器自带的alert、confirm,能力所及,我更喜欢所有的东西都是自定义:
首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js。
<link rel="stylesheet" href="http://www.mamicode.com/css/WeiConfirm.css" /> —如果可以,可以自己修改UI
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.js" ></script> —必须先引入jQuery
<script type="text/javascript" src="http://www.mamicode.com/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弹窗