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 相关文章推荐
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 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数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php远程下载类分享
2016/04/13 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python 列表理解及使用方法
2017/10/27 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python如何实现DES加密
2020/09/21 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
党校培训自我鉴定范文
2014/03/20 职场文书
节水倡议书范文
2014/04/15 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏