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 相关文章推荐
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
js实现坦克大战游戏
Feb 24 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
基于javascript的无缝滚动动画1
Aug 07 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中的HashTable结构详解
2013/06/13 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Vue.js实现数据响应的方法
2018/08/13 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
详解如何利用Cython为Python代码加速
2018/01/27 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python 读取修改pcap包的例子
2019/07/23 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
2014年财务科工作总结
2014/11/11 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
PHP实现两种排课方式
2021/06/26 PHP
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript