博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap模态框的学习笔记
阅读量:5164 次
发布时间:2019-06-13

本文共 934 字,大约阅读时间需要 3 分钟。

模态框(Modal)是覆盖在父窗体上的子窗体,可提供信息、交互等。使用模态窗口,您需要有某种触发器。

在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",表示触发的是个模态框。

设置 data-target="#myModal" 或 href="#myModal" 来指定要切换的特定的模态框(带有 id="myModal")。

myModal是模态框定义的id,来指向特定的模态框。#表示在本页面弹出。data-target="#myModal"是想要在页面上加载的模态框的目标。

可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。

  • 在模态框中需要注意两点:
    • 第一是 .modal,用来把 <div> 的内容识别为模态框。
    • 第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。
  • aria-labelledby="myModalLabel",该属性引用模态框的标题。
  • 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止
    • <div class="modal-header">,modal-header 是为模态窗口的头部定义样式的类。
    • class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。模态框右上角的x,关闭。
    • data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
      
    • class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。
    • class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。
        
 
 
 

 

转载于:https://www.cnblogs.com/778019505qq/p/4765691.html

你可能感兴趣的文章
Mongo的备份和恢复(mongodump 和mongorestore )
查看>>
第六章(jQuery 与 Ajax 的应用)(6.6 序列化元素 6.7 jQuery 中的 Ajax 事件)
查看>>
dubbo序列化hibernate.LazyInitializationException could not initialize proxy - no Session懒加载异常的解决...
查看>>
为DataGrid 写一个 DropDownListColumn
查看>>
支付宝移动支付之IOSApp调用支付宝钱包
查看>>
学会分享和交流
查看>>
hdu 1233:还是畅通工程
查看>>
jQuery中的事件绑定的几种方式
查看>>
泥塑课
查看>>
iOS 自定义的对象类型的解档和归档
查看>>
setImageBitmap和setImageResource
查看>>
AndroidStudio3.0 修改项目包名
查看>>
Python学习笔记《Python核心编程》第9章 文件和输入输出
查看>>
前缀和----求最大子矩阵和
查看>>
从人类社会的角度看OO(独家视角)
查看>>
Centos 6.5 mongodb 安装流程
查看>>
ASP.NET对文件的操作,创建文件,判断文件是否存在,判断文件是否存在删除文件夹...
查看>>
Java中涉及到金额业务的处理
查看>>
Leetcode706.Design HashMap设计哈希映射
查看>>
<fieldset>标签
查看>>