Bootstrap3实用教程
4.3.2 动态模态对话框
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

静态模态对话框

动态模态对话框

如果你希望在页面初始状态时不显示模态框,只有在用户点击某个按钮时,再打开隐藏的模态对话框,这也很简单。

首先,在页面上添加一个触发按钮。如:

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

然后,为 .modal 容器追加 .fade类,它会让对话框默认隐藏,并且在打开和关闭时具有淡入淡出效果。如:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>

此时,点击“Launch demo modal”按钮,就可以打开隐藏的模态对话框。效果如图 4‑2所示:

打开隐藏的模态对话框
图4-2 打开隐藏的模态对话框

你有很多方法可以关闭模态框,最简单的方法就是在模态框之外的任何区域点击鼠标。除此之外,你还可以按Esc键,或点击模态框标题栏的小×,或页脚的close按钮。

注意:如果希望能够通过Esc键来关闭模态框,就必须为.modal容器添加 tabindex="-1" 属性。否则,你将无法通过Esc键来关闭模态框。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验