为 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">×</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
评论 (0)