jQuery仿IOS弹出框插件


Posted in Javascript onFebruary 18, 2017

这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件,包括Alert弹出框和Confirm确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方法,一看就懂:

首先导入jquery库和插件库以及css文件

<script src="./jquery-1.8.3.min.js"></script>
<script src="./jquery.confirm-1.1.js"></script>
<link href="./jquery.confirm-1.1.css" rel="external nofollow" rel='stylesheet' type='text/css' />

Alert弹出框快速使用

$.alert('Are you sure to continue?'); --内容支持html代码
$.alert({
 title: 'Alert弹出框!', --标题 默认标题(温馨提示)
 content: 'Are you sure to continue?', --内容
});

Alert回调弹出框使用

$.alert({
 title: 'Alert回调弹出框!',
 content: 'alert带回调函数,点击确定按钮触发回调函数',
 buttons: {
  ok: {
   text: '好', --按钮标题
   action: function () { --回调事件
     alert("按钮回调函数被执行");
   }
  }
 }
});

Confirm确认框使用

$.confirm('Are you sure to continue?');
$.confirm({
 title: 'Confirm确认框!', 
 content: 'Are you sure to continue?', 
});

Confirm回调确认框使用

$.alert({
 title: 'Confirm回调确认框!',
 content: 'Confirm确认框,点击按钮触发回调函数',
 buttons: {
  ok: { --确定按钮
   text: '确定',
   action: function () {
     alert("确定按钮回调函数被执行");
   }
  },
  close: { --关闭按钮
   text: '关闭',
   action: function () {
     alert("关闭按钮回调函数被执行");
   }
  }
 }
});

确认框按钮可以放置多个

效果展示

jQuery仿IOS弹出框插件

jQuery仿IOS弹出框插件

是不是使用起来非常简单 -_-

下载链接:https://pan.baidu.com/s/1pLJJky3

以上所述是小编给大家介绍的jQuery仿IOS弹出框插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 #Javascript
angular ng-repeat数组中的数组实例
Feb 18 #Javascript
js Canvas绘制圆形时钟效果
Feb 17 #Javascript
Bootstrap风格的zTree右键菜单
Feb 17 #Javascript
js仿新浪微博消息发布功能
Feb 17 #Javascript
babel基本使用详解
Feb 17 #Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
漂亮但不安全的CTB
2006/10/09 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
XENON基于JSON变种
2010/07/27 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
js实现五星评价功能
2017/03/08 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
python pycharm的安装及其使用
2019/10/11 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
党员学习中共十八大思想报告
2014/09/12 职场文书
律师授权委托书范本
2014/10/07 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
委托公证书格式
2015/01/26 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
MySQL空间数据存储及函数
2021/09/25 MySQL
java如何实现socket连接方法封装
2021/09/25 Java/Android
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript