文档章节

4.17、Bootstrap V4自学之路-----组件---模态框

Asktao
 Asktao
发布于 2016/03/25 15:08
字数 2332
阅读 139
收藏 0


由于HTML5定义了它的语义,autofocus HTML 属性在Bootstrap模态框中产生不了影响。为了实现同样的效果,使用一些自定义JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

确保不要在一个模态框还可见的时候打开另一个模态框。在同一时候显示超过一个模态框,需要自定义代码。

尽可能把一个模态框的HTML代码始终放置在document的顶层位置,以避免别的组件影响模态框的外观以及功能。

这里有一些在移动设备上使用模态框的警告,欲知详情,请看浏览器支持文档。

静态例子

一个经渲染的模态框,带有头、主体,以及有一些操作功能的脚。

这段代码调试失败了,怎么也不显像。或许是缺少东西吧。

Modle伪代码部分:

《div class="modal fade"》<br>
--| 《div class="modal-dialog" role="document"》<br>
--| --| 《div class="modal-content"》<br>
--| --| --| 《div class="modal-header"》<br>
--| --| --| --|《button class="class"》<br>
--| --| --| --|《h4 class="modal-title"》<br>
--| --| --| --|《.除了按钮和title应该就没了吧..》<br>
--| --| --| 《div class="modal-body"》<br>
--| --| --| --|《..主题内容.》<br>
--| --| --| 《div class="modal-footer"》<br>
--| --| --| --|《.一般是按钮..》

现场演示

利用JavaScript,通过点击下面的按钮,切换一个模态框。它将从网页顶上滑下来,并淡入。

<!-- 按钮触发模型 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        《div class="modal fade"》 <br>
        --| 《div class="modal-dialog" role="document"》<br>
        --| --| 《div class="modal-content"》<br>
        --| --| --| 《div class="modal-header"》<br>
        --| --| --| --|《button class="class"》<br>
        --| --| --| --|《h4 class="modal-title"》<br>
        --| --| --| --|《.除了按钮和title应该就没了吧..》<br>
        --| --| --| 《div class="modal-body"》<br>
        --| --| --| --|《..主题内容.》<br>
        --| --| --| 《div class="modal-footer"》<br>
        --| --| --| --|《.一般是按钮..》
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

PS:出发模态框的按钮可以在CSS中,根据文档内容介绍,模态框的位置应该至于html最顶层。

二货的我放在了<!DOCTYPE html>上一行,结果ID不认。太二了。

理论应当放置于<body>下的第一行。

可选的尺寸

模态框有两种可选的尺寸,利用修饰类放在.modal-dialog上就可用了。


<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#Demo01">Large modal</button>

<div class="modal fade" id="Demo01" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        《div class="modal fade"》\
        --| 《div class="modal-dialog modal-lg"》<!-- 在这里添加 modal-lg -->
        --| 《div class="modal-content"》
        --| --| 《 ... 只是想起来.modal-content里面有  .modal-header modal-body modal-footer 。》
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Demo02">Small modal</button>

<div class="modal fade" id="Demo02" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        《div class="modal fade"》\
        --| 《div class="modal-dialog modal-sm"》<!-- 在这里添加 modal-sm -->
        --| 《div class="modal-content"》
        --| --| 《 ... 只是想起来.modal-content里面有  .modal-header modal-body modal-footer 。》
    </div>
  </div>
</div>

PS:背景图有第一个按钮的样子,是我忘记删掉了。另外第一个按钮为什么这么大呢?因为那个按钮使用了 .btn-lg类。

PS:这里和文档代码不同,按钮的 data-target=".类" 也可以是 "#id"

移除动画

如果模态框仅要求它出现,但是不要淡出淡入效果,只需从模态框标记上移除.fade类。

<div class="modal" id="Demo02" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

请看最外层 class属性中,.fade类删掉了。效果就感觉稍微有些生硬了。

使用网格系统

为了在模态框中使用Bootstrap的网格系统,只需要在.modal-body内部嵌套一个container-fluid,然后在该容器中使用普通的网格系统类。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
    Launch demo modal
</button>

<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid bd-example-row">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              Level 1: .col-sm-9
              <div class="row">
                <div class="col-xs-8 col-sm-6">
                  Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                  Level 2: .col-xs-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

PS:这里要注意的是,模态框内的.modal-body 里,加入 .container-fluid

    如果不加,直接使用.row。我感觉也没有什么不同。

基于触发按钮的多样化模态框

有几个按钮触发同样的模态框,只是内容有一些不同?使用event.relatedTarget以及HTML的data-* 属性根据点击的是哪个按钮,多样化模态框的内容。参阅relatedTarget以增进对模态框事件的了解。

<div class="bd-example">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel">New message</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">Recipient:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">Message:</label>
              <textarea class="form-control" id="message-text"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Send message</button>
        </div>
      </div>
    </div>
  </div>
</div>

不知道大家注意到没有,3个按钮指向的都是同一个模态框。但如何区分呢?请看按钮上的data-whatever属性。data可以通过JS取得。建议请看文档第一章起步的javascript小节。

高度不固定的模态框

如果一个模态框在打开时,高度发生变化,万一出现了滚动条,你必须调用$('#myModal').data('bs.modal').handleUpdate()以调整模态框的位置。

这里我想,如果实际用到的话,可以使用JQ监听。虽然可能性很小。

另外一种情况,<textarea>标签可以设定max-height。当超出max-height时<textarea>自身出现滚动条。

用途

模态框插件利用data属性或者JavaScript,根据需要切换隐藏的内容。它还向<body>添加了.modal-open类以覆盖默认的滚动行为,并生成一个.modal-backdrop类以提供一个点击区域,当在模态框的外面点击就可以抹除显示的模态框。

利用data属性

不用写JavaScript也能激活一个模态框。在一个控件元素(比如说一个按钮)上设置data-toggle="modal",同时在添加一个data-target="#foo"或者href="#foo"以指向某一个模态框,就可以切换了。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

利用JavaScript

只需要一行JavaScript就可以对id为myModal的元素调用模态框。

$('#myModal').modal(options)

这里注意,这是一个泛指。options应该有一个具体的值。

选项

选项可以通过数据属性或JavaScript。对于数据属性,附加的选项名data-,如在data-backdrop=""

名称 类型 默认值 描述
backdrop 布尔值或字符串static true 包括了一些modal-backdrop元素。作为替补,为一个backdrop指定值static,单击的时候就不会关闭模态框。
keyboard 布尔值 true 在按下Esc键的时候关闭模态框。
show 布尔值 true 在初始化的时候显示该模态框。

方法

.modal(options)

把某块内容作为模态框激活。接受一个可选的参数object

$('#myModal').modal({
   keyboard: false 
})

.modal(‘toggle’)

人为切换一个模态框。在模态框真正显示或隐藏之前返回给调用者

(即,在shown.bs.modal或者hidden.bs.modal事件发生之前)。

$('#myModal').modal('toggle')

.modal(‘show’)

人为打开一个模态框。在模态框真正显示之前返回给调用者(即,在shown.bs.modal事件发生之前)。

$('#myModal').modal('show')

.modal(‘hide’)

人为隐藏一个模态框。在模态框真正隐藏之前返回给调用者(即,在hidden.bs.modal事件发生之前)。

$('#myModal').modal('hide')

事件

Bootstrap的模态框类为模态框相关的回调函数提供了事件接口。所有的模态框事件都能由模态框自身触发。

事件类型 描述
show.bs.modal 当调用show实例方法时,会立即触发该事件。如果是由点击引起的,被点击的元素是可用的,成为Event对象的relatedTarget属性。
shown.bs.modal 当模态框对用户来说可见时(需要等待CSS过渡完成),会触发该事件。如果是由点击引起的,被点击的元素是可用的,成为Event对象的relatedTarget属性。
hide.bs.modal 当调用hide实例方法时,会立即触发该事件。
hidden.bs.modal 当模态框对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。
loaded.bs.modal 当模态框使用remote选项完成内容载入时,会立即触发该事件。
$('#myModal').on('hidden.bs.modal', function (e) {
   // do something... 
})


© 著作权归作者所有

Asktao
粉丝 27
博文 99
码字总数 114189
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
436
0
4.4、Bootstrap V4自学之路------组件---表单

表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。 类 作用 支持的变量 表单控件的任一组 用在任何块级元素上,比如说或 文本域控件 、 、、...

Asktao
2016/03/23
427
0
我是涛锅/TagCss

#TagCss 建这个项目是打算扩展一下BootStrap,增加一下更多的组件等等。 但是对自己没信心,所以这个坑可能填不上。 QQ:807081817 引用方式 #关于下面这种说明文档!! #真的是 好!难!写!...

我是涛锅
2015/08/24
0
0
兼容移动端的模态框插件--artModal

概述: artModal是一个兼容移动端的模态框插件。 灵感来自BootStrap的modal组件,与其不同的是artModal能够做到: 零依赖其他组件 向下兼容到IE6 允许多个模态框同时堆叠出现 与以往的弹窗插...

liyu365
2016/12/06
862
1
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
156
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Alibaba 实战(二) - 关于Spring Boot你不可不知道的实情

0 相关源码 1 什么是Spring Boot 一个快速开发的脚手架 作用 快速创建独立的、生产级的基于Spring的应用程序 特性 无需部署WAR文件 提供starter简化配置 尽可能自动配置Spring以及第三方库 ...

JavaEdge
今天
7
0
TensorFlow 机器学习秘籍中文第二版(初稿)

TensorFlow 入门 介绍 TensorFlow 如何工作 声明变量和张量 使用占位符和变量 使用矩阵 声明操作符 实现激活函数 使用数据源 其他资源 TensorFlow 的方式 介绍 计算图中的操作 对嵌套操作分层...

ApacheCN_飞龙
今天
7
0
五、Java设计模式之迪米特原则

定义:一个对象应该对其他对象保持最小的了解,又叫最小知道原则 尽量降低类与类之间的耦合 优点:降低类之间的耦合 强调只和朋友交流,不和陌生人说话 朋友:出现在成员变量、方法的输入、输...

东风破2019
昨天
23
0
jvm虚拟机结构

1:jvm可操作数据类型分为原始类型和引用类型,因此存在原始值和引用值被应用在赋值,参数,返回和运算操作中,jvm希望在运行时 明确变量的类型,即编译器编译成class文件需要对变量进行类型...

xpp_ba
昨天
5
0
聊聊nacos Service的processClientBeat

序 本文主要研究一下nacos Service的processClientBeat Service.processClientBeat nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/core/Service.java public class Service ex......

go4it
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部