W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap JS 模态框



JS 模态框 (modal.js)

Modal插件是一个对话框/弹出窗口,显示在当前页面的顶部。

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


模态插件类

分类 描述
.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" 代替:

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

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

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
测 试

通过 JavaScript 触发

手动启用:

$("#myModal").modal() 测 试

选项

有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

名称 类型 默认值 描述 实例
backdrop boolean or the string "static" true 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框

  • true - dark overlay
  • false - no overlay (transparent)
Using JS Using data
keyboard boolean true 当按下 escape 键时关闭模态框,设置为 false 时则按键无效

  • true - modal可以关闭当按下Esc下
  • false - modal不可以关闭当按下Esc下
Using JS Using data
show boolean true 当初始化时显示模态框 Using JS Using data

方法

下面是一些可与 modal() 一起使用的有用的方法。

方法 描述 实例
.modal(options) 把内容作为模态框激活。接受一个可选的选项对象 测 试
.modal("toggle") 切换模态框 测 试
.modal("show") 打开模态框 测 试
.modal("hide") 隐藏模态框 测 试

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件 描述 实例t
show.bs.modal 在调用 show 方法后触发 测 试
shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成) 测 试
hide.bs.modal 当调用 hide 实例方法时触发 测 试
hidden.bs.modal 当模态框完全对用户隐藏时触发 测 试

Examples

更多实例

登录模态框

下面的实例是为登录创建了一个模态框:

Example

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

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

      <!-- Modal content-->
      <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>
尝试一下 »