• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jQuery仿IOS弹出框插件

jQuery仿IOS弹出框插件

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了jquery弹框插件,jquery提示框插件,jquery弹出框插件,jquery多选下拉框插件,jquery下拉复选框插件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

这款弹出框插件是本人自己模仿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' />
</div>

Alert弹出框快速使用

$.alert('Are you sure to continue?'); --内容支持html代码
$.alert({
 title: 'Alert弹出框!', --标题 默认标题(温馨提示)
 content: 'Are you sure to continue?', --内容
});
</div>

Alert回调弹出框使用

$.alert({
 title: 'Alert回调弹出框!',
 content: 'alert带回调函数,点击确定按钮触发回调函数',
 buttons: {
  ok: {
   text: '好', --按钮标题
   action: function () { --回调事件
     alert("按钮回调函数被执行");
   }
  }
 }
});
</div>

Confirm确认框使用

$.confirm('Are you sure to continue?');
$.confirm({
 title: 'Confirm确认框!', 
 content: 'Are you sure to continue?', 
});
</div>

Confirm回调确认框使用

$.alert({
 title: 'Confirm回调确认框!',
 content: 'Confirm确认框,点击按钮触发回调函数',
 buttons: {
  ok: { --确定按钮
   text: '确定',
   action: function () {
     alert("确定按钮回调函数被执行");
   }
  },
  close: { --关闭按钮
   text: '关闭',
   action: function () {
     alert("关闭按钮回调函数被执行");
   }
  }
 }
});
</div>

确认框按钮可以放置多个

效果展示

弹出窗口效果图

确认弹出框效果图

是不是使用起来非常简单 -_-

下载链接:https://pan.baidu.com/s/1pLJJky3

以上所述是小编给大家介绍的jQuery仿IOS弹出框插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery仿IOS弹出框插件

相关文章

  • 2017-05-11jquery拼接ajax 的json和字符串拼接的方法
  • 2017-05-11js实现带三角符的手风琴效果
  • 2017-05-11jquery validation验证表单插件
  • 2017-05-11Angularjs 动态添加指令并绑定事件的方法
  • 2017-05-11JS设置时间无效问题的解决办法
  • 2017-05-11setTimeout函数的神奇使用
  • 2017-05-11Vuex简单入门
  • 2017-05-11Vue2.x中的父子组件相互通信的实现方法
  • 2017-05-11js输入框使用正则表达式校验输入内容的实例
  • 2017-05-11JS正则替换去空格的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JavaScript关联数组用法分析【概念、定义、遍历】
    • Vue.js事件处理器与表单控件绑定详解
    • jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
    • BootstrapValidator实现注册校验和登录错误提示效果
    • canvas绘图不清晰的解决方案
    • 原生JS实现幻灯片
    • 详解axios在node.js中的post使用
    • 浅谈JavaScript中promise的使用
    • 十大热门的JavaScript框架和库
    • 微信小程序 下拉菜单的实现

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有