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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
vue中@change兼容问题详解
Oct 25 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
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
express.js中间件说明详解
2019/03/19 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python使用turtle库绘制时钟
2020/03/25 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Pytorch转tflite方式
2020/05/25 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
德国家具折扣店:POCO
2020/02/28 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
新学期班主任寄语
2014/01/18 职场文书
学习自我鉴定
2014/02/01 职场文书
经营理念标语
2014/06/21 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
科学育儿宣传标语
2014/10/08 职场文书
司机个人年终总结
2015/03/03 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python