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 getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
jquery动态添加option示例
Dec 30 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
通过js随机函数Math.random实现乱序
May 19 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
大学同学十年聚会感言
2014/02/21 职场文书
逃课打麻将检讨书
2014/10/05 职场文书