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 相关文章推荐
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
vue.js中created方法作用
Mar 30 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
深入理解Python中各种方法的运作原理
2015/06/15 Python
python实现贪吃蛇游戏
2020/03/21 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python安装后的目录在哪里
2020/06/21 Python
静态成员和非静态成员的区别
2012/05/12 面试题
金融专业应届生求职信
2013/11/02 职场文书
前台接待员岗位职责
2014/01/02 职场文书
销售心得体会
2014/01/02 职场文书
学员自我鉴定
2014/03/19 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
小学班主任工作随笔
2015/08/15 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书