Bootstrap3实用教程
4.3.1 静态模态对话框
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

JavaScript内置了 3 种对话框:alert()、prompt()、confirm()。alert() 只是一个简单的提示对话框,prompt() 可以接受用户输入的信息,confirm() 允许用户执行选择性操作。当弹出一个对话框时,浏览器会停止解析页面,并中断脚本执行,直到用户关闭对话框。因此,它们被称作模态对话框。

由于JavaScript提供的对话框外观丑陋,功能过于简单,还不支持定制。因此,Bootstrap重新打造了一个模态对话框组件,它简洁、灵活,具有精简的功能和友好的默认行为。

模态对话框组件用于定义模态框的外观,模态对话框插件(modal.js)用来控制模态框组件的显示和隐藏。

静态模态对话框

Bootstrap的模态对话框由三层结构定义,由 .modal 创建最外层容器,由 .modal-dialog 创建对话框的文档结构,由 .modal-content 创建对话框的真正内容。

一个标准的模态对话框的内容包括头部、正文、尾部 3 个部分,头部由 .modal-header 定义,主要放置标题和关闭按钮,关闭按钮是通过自定义属性 data-dismiss 来触发关闭行为,取值 "modal" 表示关闭模态对话框;正文由 .modal-body 定义;尾部由 .modal-footer 定义,主要放置操作按钮,按钮可以使用 <a> 元素,也可以使用 <button> 元素。代码如下:

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <a class="btn btn-default" data-dismiss="modal">Close</a>
        <a class="btn btn-primary">Save changes</a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

打开页面时,上述模态对话框默认会直接显示在页面上。效果如图 4‑1所示:

模态对话框
图4-1 模态对话框

为了增强模态框的可访问性,务必为.modal添加role="dialog"aria-labelledby="..."属性,并为.modal-dialog添加role="document"属性。你还应该通过aria-describedby属性为模态框.modal添加描述性信息。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验