首页 > 经验 > 关键词 > Bootstrap3.0学习最新资讯 > 正文

Bootstrap3.0学习教程十七:JavaScript插件模态框

2015-04-09 16:19 · 稿源:aehyok博客园
文章目录

本文是Bootstrap3.0学习教程系列的第十七篇,完整教程可查看:Bootstrap3.0教程

这篇文章中我们主要来学习一下JavaScipt插件模态框。在学习模态框之前,我们先来了解一下JavaScript插件吧。

JavaScript插件概览

插件可以单个引入(使用Bootstrap提供的单个*.js文件),或一次性全部引入(使用bootstrap.js或压缩版的bootstrap.min.js)。

不要将两份文件全部引入

bootstrap.js和bootstrap.min.js同样是包含了所有插件。区别是:一个没有压缩,一个进行了压缩。

插件之间的依赖

某些插件和CSS组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖jQuery(也就是说,jQuery必须在所有插件之前引入页面)。 bower.json文件中列出了所支持的jQuery版本。

Data属性

你可以仅仅通过data属性API就能使用所有的Bootstrap插件,无需写一行JavaScript代码。这是Bootstrap中的一等API,也应该是你的首选方式。

话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭data属性API的方式,即解除绑定到文档命名空间上的所有事件data-api。就像下面这样:

$(document).off('.data-api')

另外,如果是针对某个特定的插件,只需在data-api前面添加那个插件的名称作为命名空间,如下:

$(document).off('.alert.data-api')

编程式API

我们还提供了所有Bootstrap插件的纯JavaScript API。所有公开的API都是支持单独或链式调用的,并且返回其所操作的元素集合(注:和jQuery的调用形式一致)。

$(".btn.danger").button("toggle").addClass("fat")

所有方法都可以接受一个可选的option对象作为参数,或者一个代表特定方法的字符串,或者什么也不提供(在这种情况下,插件将会以默认值初始化):

$("#myModal").modal() // 使用默认值初始化 $("#myModal").modal({ keyboard: false }) $("#myModal").modal('show')

每个插件还通过Constructor属性暴露了其自身的构造器函数:$.fn.popover.Constructor。如果你想获取某个插件的实例,可以直接从页面元素内获取:$('[rel=popover]').data('popover')。

避免冲突

某些时候可能需要将Bootstrap插件与其他UI框架共同使用。在这种情况下,命名空间冲突随时可能发生。如果不行发生了这种情况,你可以通过调用插件的.noConflict方法恢复原始值。

var bootstrapButton = $.fn.button.noConflict() $.fn.bootstrapBtn = bootstrapButton 事件

Bootstrap为大部分插件所具有的动作提供了自定义事件。一般来说,这些事件都有不定式和过去式两种动词形式,例如,不定式形式的动词表示其在事件开始时被触发;而过去式动词表示其在动作直接完毕之后被触发。

从3.0.0开始,所有的Bootstrap事件都采用了命名空间。

所有以不定式形式的动词命名的事件都提供了preventDefault功能。这就赋予你在动作开始执行前将其停止的能力。

$('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() })

第三方工具库

Bootstrap官方不提供对第三方JavaScript工具库的支持,例如Prototype或jQuery UI。除了.noConflict和采用命名空间的事件,还可能会有兼容性方面的问题,这就需要你自己来处理了

模态框

案例

模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。

不支持模态框重叠

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。

静态案例

以下模态框包含了模态框的头、体和一组在放置于底部的按钮。

<div class="modal fade">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title">Modal title</h4>

</div> <div class="modal-body">

<p>One fine body&hellip;</p>

</div> <div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

首先最外层的是model,然后里面嵌套了一个model-dialog,model-dialog里面又嵌套model-content,当中包含“header”、“title”、"footer"。不过运行程序后,模态框没有显示出来,暂时还没找到原因。

动态演示

点击下面的按钮即可通过JavaScript启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body"> One fine body&hellip; </div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div>

同样的,不过首先是一个按钮,按钮中添加了两个data属性,要设置data-toggle="modal" data-target="#myModal"。

然后下面最大的是一个modal,并且给与属性id赋值为上面button中的data-target ,进行交互。

增强模态框的可访问性

请确保为.modal添加了role="dialog";aria-labelledby="myModalLabel"属性指向模态框标题;aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。

另外,你还应该为模态框添加描述性信息。为.modal添加aria-describedby属性用以指向描述信息。

用法--通过data属性

不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素(例如,按钮)上设置data-toggle="modal",并使用data-target="#foo"或href="#foo"指向特定的模态框即可。就像本例中的

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>

用法--通过JavaScript调用

只需一行JavaScript代码,即可通过id myModal调用模态框:

$('#myModal').modal(options)

选项

可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-backdrop=""。

网友热搜:

  • 相关推荐
  • 大家在看
  • 联发科独立AI处理器APU3.0,手机AI应用的原动力

    近年来,手机在语音助手、AI拍照、视频优化、VR/AR游戏等方面的AI应用快速发展,手机想要实现这些AI应用,需要芯片提供足够强大的AI算力和低功耗效能,因此手机芯片厂商纷纷在SoC中加入了独立的人工智能处理器,用于专门进行AI运算。例如联发科的天玑系列5G芯片,无论是主打高端市场的天玑 1000 系列,还是主打中高端市场的天玑 800 系列,都搭载了联发科自研的独立AI处理器 APU 3.0。早在 2018 年,联发科就开始将独立AI处理器内?

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • 更轻盈,更安全,宏碁TravelMate X5高效办公

    在市面上众多类型的笔记本中,轻薄本其轻薄的特征受到职场人士的青睐,对于现代企业办公方式与工作场景多样化的情形下,易于携带的轻薄本则成为都市白领们的必备武器。突破新极限,宏碁TravelMate X5 轻薄本拥有超越想象的轻薄,整机仅重0.98kg,薄至14.9mm,轻松收纳,更拥有强劲的性能与安全的工作环境为高效办公护航。 轻薄体验,搭载酷睿处理器性能非凡 TravelMate X5 不仅仅只是轻薄,整机重量控制在0.98kg的同时,更搭载了?

  • 三星Galaxy Note 20 Ultra爆料:一亿像素主摄敲定

    6月26日消息,知名爆料人士Roland Quandt推特表示,已经有确凿证据表明三星Galaxy Note 20 Ultra的主摄为108MP。除了一亿像素主摄之外,Galaxy Note 20 Ultra还有可能会使用潜望式长焦镜头及超

  • 三星Galaxy S20 Ultra从15楼摔下:屏幕基本完好

    6月13日消息,有网友表示,自己的Galaxy S20 Ultra从15楼摔到3楼,背板摔坏了,但是屏幕基本完好,仅有一个坏点。据悉,Galaxy S20 Ultra是三星2月份推出的年度旗舰,首发起售价9999元,它采用

  • 学习通崩了?6月17日学习通app疑似无法打开

    6月17日,在今天有不少网友表示学习通App出现无法开打,页面刷新不出来等多种问题,疑似该app崩了。而在今年3月份学习通也曾发生过app故障,当时官方表示因为上千万用户同时使用,造成瞬间流量过载,导致部分功能不流畅,学习通通过“起飞”模式,使用户分批次登陆,最大限度保障用户的使用。

  • 人人App疑遭全网下架 人人App为什么被下架

    近日苹果AppStore应用商店上已经无法搜索到人人APP,疑似已经被下架,而在多个安卓应用渠道同样也无法搜索和下载,提示为“该应用内部优化中,暂不提供下载”。那么人人APP为什么被下架,官方对此如何回应呢。

  • 超大杯!三星Galaxy Note 20 Ultra保护壳曝光:相机模块大的惊人

    6月21日,据外媒报道,网上已经流传出了关于三星Galaxy Note 20和Note 20 Plus/Ultra的手机保护套,从照片可以看出来,相机似乎得到了升级,因为相机模块十分大。从图片可以这几款机型的差别,

  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

    2G 3G 4G
  • 有味APP

    有味APP,前身为腾讯新闻极速版,产品定位是“美好生活分享平台”。产品分为首页、圈子、关注和小窝(即个人主页)四大部分,用户可在产品内发布图文内容或视频内容。

  • AppClips是什么功能 AppClips怎么使用

    苹果iOS14系统中加入了一个全新的AppClips功能,这个功能是可以让用户不下载全部应用的情况下就可以使用该应用的功能,那么AppClips是怎么使用,这里我们来了解下AppClips功能的介绍。

  • 三星官网实力偷跑:超大杯Note20 Ultra高清渲染图曝光

    8月5日(周三)可能是三星Galaxy Unpacked活动举办的日子,不少人猜测,主角将是Galaxy Note 20系列。日前,三星乌克兰官网意外在Note 8的产品页面泄露了疑似Note20 Ultra的高清渲染图。此次

  • 业界首款!三星Galaxy Note 20 Ultra用上LTPO屏:120Hz+2K

    6月5日消息,XDA主编Max Weinbach爆料,Galaxy Note 20 Ultra采用了6.9英寸WQHD+ 120Hz LTPO显示屏,分辨率为3040×1440。值得注意的是,这是业界第一款采用LTPO显示屏的旗舰手机。L

  • 即刻app恢复上架

    ​今日,下架近一年的社交app即刻宣布正式回归,已可下载。据悉,即刻本次上线的是即刻7. 0 版本,新增了额心情日记、足迹地图、头像弹一弹等功能。去年 7 月,即刻APP发文称,将进行技术升级,升级期间即刻App端和Web端暂时无法使用,升级完成后即刻会在第一时间通知大家。

  • 罗永浩推荐秒熊英语App怎么样?秒熊App介绍

    秒熊英语app是一款通过有趣的短视频来学外语的应用,由「搜狗输入法之父」马占凯老师倾力打造的英语学习产品,帮助广大英语学习爱好者,广大考生提升英语能力。秒熊英语app是一款看电影学英语神器,还有热门美剧、动画、纪录片、脱口秀等 100000 条小视频。 15 秒小视频学英语,有趣无压力!以下是秒熊英语App特点的详细介绍。

  • 币安区块101对话 Vtrading CEO 宋东来:普通人的财富密码-量化交易和返佣

    2020 年 6 月 16 日,币安滢哥对话Vtrading CEO 宋东来。宋东来创立Vtrading的初心是希望能够避免让更多韭菜被骗,Vtrading现在所有的参数都是开放的,官方提供的工具也永久免费。宋东来认为评价一个量化工具的好坏,很重要的两点是安全性和稳定性,这是一个产品能够长久的基础要素。除此之外还要做好风控,想要做出一个被大众认同的产品就一定要站在用户的维度思考问题。关于币安返佣,宋东来认为币安的返佣生态是多方共赢的。币?

  • 因认为“弹唱”功能侵权 唱鸭App向唱吧App索赔57万元

    近日,北京知识产权法院受理了原告北京破壁者科技有限公司(简称破壁者公司)诉被告北京小唱科技有限公司(简称小唱公司)、被告北京酷智科技有限公司(简称酷智公司)侵害计算机软件著作权纠纷一案。

  • 即刻App回归现已恢复运营 即刻App安卓、iOS版下载地址

    即刻App现已恢复正常运营。即刻是一款基于兴趣的信息推送提醒工具,支持 iOS和Android 平台。用户可以通过即刻关注自己感兴趣的人物、资讯和事件,即刻会跟踪相应的动态,并通过推送通知让用户及时获取自己关心的信息。

  • 苹果计划推出Apple Card分期服务 AppleCard国内开通方法

    苹果Apple Card分期服务将覆盖大部分苹果产品。其中,Mac、iPad、iPad键盘、ApplePencil、XDR Display显示器将支持 12 期免息分期;AirPods、Apple TV、HomePod将支持 6 期免息分期。客户可以通过Wallet应用进行支付,每个月的费用将加到他们的Apple卡账单上。

  • AppsFlyer 发布 Zero 套餐,为企业提供终身免费的营销工具与API

    Zero 套餐是 AppsFlyer 零预算营销计划的一部分,通过整合产品与工具,为开发者、营销人员与产品经理揭示核心自有渠道的潜在价值 2020 年 6 月11 日, 北京 ,今天,全球归因领导者 AppsFlyer 宣布推出终身免费套餐 Zero,该套餐是 AppsFlyer 近期推出的零预算营销计划(Zero Budget Marketing Initiative)的一部分。这一计划旨在为移动应用开发者、营销人员和产品经理免费提供领先的营销工具与 API,赋能增长,并最大限度发掘企业

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议