Bootstrap2用户指南
5.3.1 使用方法
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

JavaScript内置了 3 种对话框:alert()、prompt()、confirm()。alert() 只是一个简单的提示对话框,prompt() 可以接受用户输入的信息,confirm() 允许用户执行选择性操作。

当弹出一个对话框时,浏览器会停止解析页面,并中断脚本执行,直到用户关闭对话框。因此,这些对话框被称作模态对话框。

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

模态对话框插件需要 bootstrap-modal.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-modal.js 文件。

使用方法

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

<div class="modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

效果如图 5‑1所示:

Bootstrap模态框Modal插件
图5-1 Bootstrap模态框Modal插件

事实上,Bootstrap中的模态对话框就是一个页面元素,它可以很简单,也可以很复杂。你可以根据需要,在模态对话框的正文部分放置任何内容。如果内容很多,Bootstrap会自动为对话框的正文部分添加滚动条。

默认情况下,打开页面时,模态对话框会直接显示在页面上。只需为 . modal 容器追加 .hide 类,就可以让模态对话框默认隐藏。同时,还可以为 . modal 容器追加 .fade 类,让模态对话框在打开和关闭时具有淡入淡出效果。如:

<div class="modal hide fade">
  ...
</div>

对于默认隐藏的模态对话框,你可以在页面上添加一个按钮,当页面加载时,页面上只显示按钮,当用户点击按钮时,再打开隐藏的模态对话框。如:

<!-- 触发按钮 -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

<!-- 模态对话框 -->
<div id="myModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3 id="myModalLabel">Modal Heading</h3>
  </div>
  <div class="modal-body">
    <h4>Text in a modal</h4>
    <p>Duis mollis, est non commodo luctus, eget lacinia odio sem.</p>
    ...
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

运行效果如图 5‑2所示:

Bootstrap模态框Modal插件触发按钮
图5-2 Bootstrap模态框Modal插件触发按钮

点击上述按钮,就会打开隐藏的模态对话框。效果如图 5‑3所示:

Bootstrap打开隐藏的模态框
图5-3 Bootstrap打开隐藏的模态框

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验