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
接下来就是调用方法,先看看漂亮的效果吧:
上面图片效果调用用方法:
<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弹窗的更多相关文章
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- jquery实现css3动画
jquery animate改变元素样式时,只支持数字值的变化,比如width,height等,但是css3属性状态值很多都不是数字值,而是字符串和数字混合在一起,比如translate(), rot ...
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- 16款创建CSS3动画的jQuery插件
jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...
- DrawSVG - SVG 路径动画 jQuery 插件
jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...
- Minimit Anima – 硬件加速的 CSS3 动画插件
Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件.基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery ...
- 让人心动的jQuery插件和HTML5动画
1.jQuery/CSS3带表单的下拉菜单 今天要分享一款基于jQuery和CSS3的下拉菜单,这款jQuery下拉菜单非常特别,我们直接可以在下拉菜单中填写联系表单.登录表单.而且整个下拉菜单的外观 ...
随机推荐
- maven-使用assembly自定义打包
用maven管理项目引用依赖很方便,但是打包的时候如果是web包还好,会直接把依赖的jar包打到lib目录中,如果是jar包的话,依赖默认是不打入进去的 这样如果运行环境中没有依赖的jar包,就麻烦了 ...
- C#.NET使用AnimateWindow制作淡入淡出特殊效果的窗体
使用AnimateWindow制作淡入淡出效果的窗体 命名空间: using System.Runtime.InteropServices; API函数: [DllImport("user3 ...
- Asp.Net 之 MasterPage
母版页是VS2005中新引入的一个概念,它很好地实现界面设计的模块化,并且实现实现了代码的重用.它就像婚纱影楼中的婚纱模板,同一个婚纱模板可以给不同的新人用,只要把他们的照片贴在已有的婚纱模板就可以形 ...
- hdu-5681 zxa and wifi(dp)
题目链接: zxa and wifi Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Othe ...
- 2014年互联网IT待遇【转载】
2014年互联网IT待遇[转载] 一.民企 1.百度 13k*14.6,special 14~17k*14.6 开发类 13K*14.6 (2014) 测试类.前端类 12K*14.6 ( ...
- 设置UITableView背景透明/监听cell左边的删除按钮的点击事件
_tableView = [[UITableView alloc] init]; _tableView.delegate = self; _tableView.dataSource = self; _ ...
- 【CSS3】---为边框应用图片 border-image
为边框应用图片 border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似.例如: background:url(xx.jpg) 10px 20px no ...
- UI设计之PS界面初始化设置
一.PS界面初始化 1.新建设置 web设计的基础标准:宽度为1920px,高度自定义,分辨率72px,背景模式RGB 8位.(提示:可以“存为预设”以便以后直接调用) 注意:背景内容为透明!!! ...
- 会话—session
这篇随笔是上一篇的姊妹篇@_@! session 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下) ...
- C#的Process类的一些用法
c#之process类相关整理 一.根据进程名获取进程的用户名? 需要添加对 System.Management.dll 的引用 using System.Diagnostics; using Sys ...