jQuery仿IOS弹出框插件

这款弹出框插件是本人自己模仿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("关闭按钮回调函数被执行");
   }
  }
 }
});

确认框按钮可以放置多个

效果展示

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

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

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

赞 (0)

相关推荐

  • 基于jQuery的弹出框插件

    html如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

  • jquery弹出框的用法示例(一)

    最近做一个项目,许多功能都是关于弹出框的,以前觉得弹出框就那一种,很容易实现,但是最近真的做起这个功能了,发现会有好多自己考虑不到的问题. 比如关于一些添加,删除,修改的弹出框,当添加一些用户的时候,弹出框里要提交一些关于用户的信息,设置密码等信息,当修改的时候,根据用户的名字和id号来修改密码等等. 例子如下: 复制代码 代码如下: <ul class="tabPanel clearfix"> <li class="hover"> <

  • 基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）

    原理很简单: 获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的.有了这个,可以计算出来垂直居中的坐标.但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可. $(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚. 最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间. 具体代码: 复制代码 代码如下: <!DOCTYPE HTML> <html> <

  • jQuery弹出框代码封装DialogHelper

    看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. 复制代码 代码如下: //require ScrollHelper.js function DialogHelper() {     var _this

  • js弹出框轻量级插件jquery.boxy使用介绍

    当你需要使用弹出框时,当然可以使用jquery-ui,artdiag,blockUI等等,但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错! 复制代码 代码如下: <script type='text/javascript'> $(function() { $('#ask-actuator').click(function() { Boxy.ask("How are you feeling?", ["Great&q

  • jQuery+css+html实现页面遮罩弹出框

    jQuery+css+html实现页面遮罩弹出框

    页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码 代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"&g

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • jquery实现一个简单好用的弹出框

    jquery实现一个简单好用的弹出框

    自己改写一些jquery的部分代码,自己总结出来一个比较好用的jquery弹出框,留着以后工作时候再用.喜欢就拿走吧! 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • jquery弹出框的用法示例(2)

    第二种情况是关于弹出框,没有关闭按钮,但是点击其他地方的时候,弹出框消失,这个还涉及到一些关于层次问题,必须用js给弹出框的父元素加上更高的层次,以免被下面的内容覆盖. 复制代码 代码如下: <div class="listBox"> <div class="tit"> <h2>询盘分配</h2> <div class="listTit"> <ul> <li class

  • jQuery仿IOS弹出框插件

    jQuery仿IOS弹出框插件

    这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件,包括Alert弹出框和Confirm确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方法,一看就懂: 首先导入jquery库和插件库以及css文件 <script src="./jquery-1.8.3.min.js"></script> <script src="./jquery.confirm-1.1.js">&l

  • Android自定义view仿iOS弹出框效果

    Android自定义view仿iOS弹出框效果

    本文实例为大家分享了Android自定义view仿iOS弹出框的具体代码,供大家参考,具体内容如下 运行效果图 自定义对话框的使用,仿照ios.从底部弹出,类似pop窗口.包括消息.图片.列表及对话框. 好了,用法都会,直接贴上代码 1.layout布局文件 view_actionsheet.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="ht

  • jQuery使用Layer弹出层插件闪退问题

    jQuery使用Layer弹出层插件闪退问题

    一.前言 巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下 做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后写点击事件在form表单中(第一个坑),接着,又使用button按钮(悲剧的开始),同样放在form表单下.想要的效果就是当我点击按钮的时候,就弹出层.(悲剧) 好了,巨坑开始,一开始页面打好之后,就放到SSM框架中,出现的问题一开始就是404地址找不到,使用绝对定位不行,浏览器报的错误一直是错误的

  • jQuery实现气球弹出框式的侧边导航菜单效果

    jQuery实现气球弹出框式的侧边导航菜单效果

    本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUB

  • JQuery实现页面弹出框

    JQuery实现页面弹出框

    本文实例为大家分享了JQuery实现页面弹出框的具体代码,供大家参考,具体内容如下 bootstrap4里面有个模态框,点击页面中的某个按钮或者元素就会弹出一个框框: 今天尝试用JQ来实现一下,具体的思路就是: 1.在页面中创建一个div2.用JQ中的hide()和show()来控制上面的div的隐藏和显示 第一步:创建按钮,div,样式 <head>     <meta charset="UTF-8">     <title>页面弹出框</t

  • Android使用popupWindow仿微信弹出框使用方法

    本文实例为大家分享了Android使用popupWindow仿微信弹出框的具体实现代码,供大家参考,具体内容如下 效果如下: 一.activity_main.xml代码 在activity_main.xml中设置"弹出框"按钮,并将activity_main.xml最外层设置一个id,代码如下 <androidx.drawerlayout.widget.DrawerLayout     xmlns:android="http://schemas.android.com/

  • Jquery实现顶部弹出框特效

    Jq制作的页面顶部动态弹出的提示框,可以用于提示信息的显示以及通知信息的显示. Html代码 <div class="tooltiptop"> <div class="bg"></div> <div class="main"><i>Jq顶部弹出框</i><span onClick="ToolTipTop.Hide();" title="关闭

  • jQuery实现消息弹出框效果

    jQuery实现消息弹出框效果

    本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下 效果图 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- BootCDN提供了很多如JQuery.Chart.js.ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/--> <scrip

随机推荐