Bootstrap框架中模态弹出框Modal

　在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。本文将详细介绍Bootstrap模态弹出框

结构分析

　　Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：

　　 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

　　 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

　　 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

对于弹窗而言，modal-content是样式的关键。主要设置了弹窗的边框、边距、背景色和阴影等样式 

除此之外，modal-content中的modal-header、modal-body和modal-footer三个部分样式设置如下

这三个部分主要控制一些间距的样式。而modal-footer都是用来放置按钮，所以底部还对包含的按钮做了一定的样式处理

触发方式

　　众所周知，模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作（事件）才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种

　　在介绍触发方式之前，首先要说明.show和.fade这两个方法。只有模态弹出窗默认是隐藏的，才能触发其显示

方法一:

模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）

　　data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；

　　data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值

方法二:

　　触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性 

　　不过建议还是使用统一使用data-target的方式来触发

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知