分类
Javascript

为Bootstrap模态框注入内容

为Bootstrap模态窗口添加内容，页面上加载的模态框的目标通常是Html节点。如果是一个独立的页面又该怎样处理？可以使用jQuery.load方法，加载页面的内容到模态窗口中。更简单的方法是设置href属性动态为模态窗口注入内容。
index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>为BOOTSTRAP模态框注入内容</title>
  <!-- build:css css/index.min.css -->
  <link rel="stylesheet" href="css/libs/normalize.css">
  <link rel="stylesheet" href="css/libs/bs-grid.css">
  <link rel="stylesheet" href="css/libs/bs-forms.css">
  <link rel="stylesheet" href="css/libs/bs-buttons.css">
  <link rel="stylesheet" href="css/libs/bs-modal.css">
  <link rel="stylesheet" href="css/libs/utilities.css">
  <!-- endbuild -->
</head>
<body>
  <h2>创建模态框</h2>
  <button id="btn" class="btn btn-default" data-toggle="modal"
    data-target="#loginModal" data-remote="login.html">登录
  </button>
  <form class="modal fade" id="loginModal" tabindex="-1"
    role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content"></div>
    </div>
    </form>
  </div>
  <!-- build:js js/index.min.js -->
  <script src="js/libs/jquery.js"></script>
  <script src="js/libs/bs-modal.js"></script>
  <script src="js/index.js"></script>
  <!-- endbuild -->
</body>
</html>

上述代码中我们为按钮触发器指定了有效URL的href为外部文件form.html。登录页面相应的代码如下：

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title" id="loginModalLabel">登录</h4>
</div>
<div class="modal-body">
  <div class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">邮箱</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">密码</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox" id="remember"> 记住我</label>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer" align="center">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="submit" class="btn btn-primary">确定</button>
  </div>
</div>

为模态窗口注入内容可以将已有页面封装成模板来重复使用。当然使用iframe也可以实现类似功能，但由于使用iframe要访问多个window，因此这种方法要烦琐一些。
github：https://github.com/51fe/bootstrap-tips/tree/01-dynamic-add。

点击登录按钮查看效果：https://51fe.github.io/bootstrap-tips/app