Bootstrap JS 模态参考


JS 模态 (modal.js)

模态插件是显示在当前页面顶部的对话框/弹出窗口。

有关模态的教程,请阅读我们的 Bootstrap 模态教程


模态插件类

描述
.modal 创建模态
.modal-content 使用边框、背景颜色等正确设置模态框的样式。使用此类添加模态框的页眉、正文和页脚。
.modal-header 定义模式标题的样式
.modal-body 定义模态 body 的样式
.modal-footer 定义模式中页脚的样式。 注释: 默认情况下,此区域右对齐。要改变这一点,用 text-align:left|center 覆盖 CSS
.modal-sm 指定一个小模态
.modal-lg 指定一个大模态
.fade 添加使模式淡入淡出的动画/过渡效果

通过 data-* 属性触发模态

data-toggle="modal"data-target="#modalID" 添加到任何元素。

注释: 对于 <a> 元素,省略 data-target 并使用 href="#modalID" 代替:

实例

<!-- 按钮 -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- 链接 -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- 其他元素 -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
亲自试一试 »


通过 JavaScript 触发

手动启用:

实例

$("#myModal").modal()
亲自试一试 »

Modal 模态选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 data-,如 data-backdrop=""。

名称 类型 默认值 描述 试一试
backdrop boolean or the string "static" true 指定模态是否应该有一个深色覆盖:

  • true - 深色叠加
  • false - 没有覆盖(透明)

如果您指定值 "static",则在其外部单击时无法关闭模态

Using JS Using data
keyboard boolean true 指定是否可以使用转义键 (Esc) 关闭模式:

  • true - 模式可以用 Esc 关闭
  • false - 无法使用 Esc 关闭模式
Using JS Using data
show boolean true 指定初始化时是否显示模态框 Using JS Using data

Modal 模态方法

下表列出了所有可用的模态方法。

方法 描述 试一试
.modal(options) 将内容激活为模式。请参阅上面的选项以获取有效值 测试一下
.modal("toggle") 切换模式 测试一下
.modal("show") 打开模态 测试一下
.modal("hide") 隐藏模态 测试一下

Modal 模态事件

下表列出了所有可用的模式事件。

事件 描述 试一试
show.bs.modal 当模态即将显示时发生 测试一下
shown.bs.modal 在模态完全显示时发生(在 CSS 转换完成后) 测试一下
hide.bs.modal 模态框即将隐藏时发生 测试一下
hidden.bs.modal 在模态完全隐藏时发生(在 CSS 转换完成后) 测试一下

更多实例

登录模态

以下示例为登录创建了一个模态:

实例

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- 使用按钮触发模态 -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- 模态 -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- 模态内容-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
            <button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
亲自试一试 »