Bootstrap框架模态弹出框Modal

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

结构分析

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

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

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

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

参数说明

　　除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。有关Modal弹出窗自定义属性相关说明如下所示

　　该参数设置在按钮上，或者弹窗上都可以。出于方便，一般地，在按钮上设置

　　[注意]属性值一定要加引号，如data-backdrop="false"

　　如果想要支持esc键关闭弹窗，需要在弹窗上设置tabindex="-1"

【事件设置】

　　模态弹窗还支持五种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后及远端数据加载后，具体描述如下： 

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

微信扫码关注

更新实时通知