Bootstrap
Bootstrap是一个现在还比较流行的框架,如同大众UI框架一样,封装了大量的样式和组件,虽然Bootstrap还是多用于移动开发,但目前已经有很多公司的网页仅使用Bootstrap制作。
Bootstrap是一个比较成熟且存在较长(2015年发布)的框架,可直接使用类似flex一样的响应式布局。不过,在兼容性上,Bootstrap团队发布的alpha第一版就已经移除了对IE8的支持,并且在beta版发布之前,alpha最后一版直接将IE9的支持移除,flex默认开启,这就说明,你甚至不能再通过Sass变量对flex布局禁用,所有网格文档均整合至一个grid.md里。嗯,有点扯远了。
模态框
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等模态框目前再前端项目中使用量不断上升,模态框再页面弹出时不允许用户进行其他操作的浏览器对话框,再美观和交互上有自己的优点。
Bootstrap插件提供了模态框的样式以及部分模态框操作js
模态框引入
如果只是单纯的引入模态框,可以直接引入Bootstrap的modal.js/css包即可,如果进行操作,你可能需要jquery.min.js和bootstrap.min.js。
使用模态框
基本上,你可以直接建立一个模态框,并在html中按钮等控制元素中设置data-toggle=’modal’,data-target=’modalId’;
|
|
上述代码部分属性解读:
- button按钮中的btn/btn-primary/btn-lg/btn-default,这是一个按钮/主按钮样式蓝色/大按钮/按钮默认样式
- modal fade,声明一个模态框,采用fade(淡显示动画)弹出,这就不多说了,熟悉动画库的都知道。
- aria-labelledby/aria-hidden,aria-labelledby该属性引用模态框的标题。再弹出时阅读器会读出用户名,这时为盲人设定的,模态框主要用在一些关键的地方,提供此种交互是应该的,aria-hidden,表示一开始模态框不显示。
- modal-dialog/modal-content/modal-title/modal-body/modal-footer声明modal对话框/modal住内容/modal标题/modal文本/modal脚
- data-dismiss=”modal”,表示点击时模态框关闭
有提交需求的模态框,也可以将按钮改为js调用.modal()
这个比较简单,直接采用js调用模态框即可,还是上面的例子12345$(function() {$('#myModal').modal({keyboard: true})});
modal()方法的参数可以是个方法,同时可是个事件:
- .modal(options),把内容作为模态框激活。接受一个可选的选项对象,如上面的代码,选项对象包括(backdrop,指定一个静态的背景,当用户点击模态框外部时不会关闭模态框/keyboard,默认当按下 escape 键时关闭模态框,设置为 false 时则按键无效/show,当初始化时显示模态框/remote,使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容)
- .modal(‘toggle’)手动切换模态框
- .modal(‘show’)手动打开模态框
- .modal(‘hide’)手动隐藏模态框。
- 事件,分为show/shown/hide/hiden,分别再show激发时/show激发后/hide激发时/hide激发后,比如下面的代码就表示了id为ModalId的模态框再激发关闭模态框的同时,弹出hi!。123456$(function() {$('#ModalId').on('hide.bs.modal',function() {alert('hi!');})});