30
2018
07

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/post/8449.html

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

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。