bootstrap源码阅读(一)——modal原理

本文探讨了Bootstrap模态框Modal的实现原理,包括如何通过data属性和JavaScript调用模态框,以及Bootstrap中data-属性赋予标签的灵活性。作者通过阅读源码,解析了Modal的显示和隐藏机制,特别强调了Bootstrap通过添加body类实现遮罩层的独特之处,以及事件冒泡在Modal中的应用。
摘要由CSDN通过智能技术生成

模态框

关于如何读源码。
其实发现bootstrap的源码真的很好读,可能真的是这样,越是成熟的东西,它的源码也就越好读。
这里写图片描述
这是它的js目录文件,可以看到bootstrap其实就是这么一点儿js文件,我对于bootstrap的dropdown、tab、modal、transition比较感兴趣,所以我会从这几个js文件看起。
之所以先看modal.js,是因为是前人的铺垫,网上有很多前辈写过相关的博文,
比如说:http://www.cnblogs.com/aaronjs/p/3160863.html
所以先从这里读起。

先说一下模态框的用法(阅读API)

通过 data 属性或 JavaScript 调用模态框插件,可以根据需要动态展示隐藏的内容。模态框弹出时还会为 body 元素添加
.modal-open 类,从而覆盖页面默认的滚动行为,并且还会自动生成一个 .modal-backdrop
元素用于提供一个可点击的区域,点击此区域就即可关闭模态框。

这里很惊奇,因为自己以前写过这类的模态框,
一般来说是单独写一个遮罩层,没想到bootstrap居然是用的为body添加类的方法,顿时觉得确实是妙,因为单独写遮罩层的话,还需要查询文档高度。

使用方法一——通过 data 属性
不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素(例如:按钮)上添加 data-toggle=”modal” 属性,或者 data-target=”#foo” 属性,再或者 href=”#foo” 属性,用于指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

指定data-toggle=”modal” 以及data-target=”#[id]”。
这里说一点的是,bootstrap的精妙之处就在于它定义了data-属性,以使得很多标签有了灵活性:
比如下拉框的实现也是绑定data-toggle=”dropdown”;
标签页 data-toggle=”tab”

使用方法二——通过 JavaScript 调用

$('#myModal').modal(options)
<!-- Button trigger modal -->
<button type="button" class=
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值