现在， 我们定义的这个对话框，所有的代码都是在这一个文件里面，我们其实可以让对话框里面的主体内容来自其它的地址，当然这个地址要符合同源规则，也就是需要跟使用这个对话框的页面来自同一个主机名，同一种协议，同一个端口。

这里我们先去新建一个 html 文档 ... 命名为 login-form.html ...

添加一个基本的 html 结构 ... 在这个文档的 body 标签里面的东西就是在对话框上面内容 ... 包括对话框的头部，主体，还有页脚 ...

先回到 index.html ...

找到定义对话框的地方 ... 在这里，modal-content 这个类所在的元素所包装的内容，都会是来自这个文档以外的那个地址 ... 也就是刚才我们创建的 login-form.html ...

Bootstrap 会使用 jQuery 的 load 方法，把运程的地址里面的内容，载入到这个 modal-content 元素里面。

所以，我们可以先把这块内容剪切掉 ... 回到 login-form.html ... 粘贴到这里 ...

简单再修改一下对话框的主体内容 ... 可以放一个登录用的表单 ...

<form role="form">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="输入 Email">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="输入密码">
</div>
</form>

保存 ... 再回到 index.html ...

想要使用这种加载远程地址的功能 ... 可以使用 JavaScript 的形式 ... 在页面的底部 ... 找到之前用来设置对话框选项的 JavaScript 代码 ...

在这里，再添加一个 remote 选项 .... 然后把它的值。设置成一个远程的地址 ...

remote : 'login-form.html'

保存 ... 回到浏览器 ... 点击 登录 ...

会打开一个对话框 ... 注意这个对话框里面的内容，是来自一个其它的地址 ... 也就是我们指定的 login-form.html 。

要注意的是，jQuery 的 load 方法需要用到 Web 服务器 ... 也就是，如果你直接是在文件系统里面，打开的这个页面，在这个对话框里面，就不会显示 login-form.html 这个文档里面的内容了 ...

这里，我用的是 Brackets 的实时预览的功能 ... 它相当于是创建了一个 Web 服务器，然后打开了这个地址 。

除了使用 JavaScript 的方式以后，我们可以直接在这个开启对话框的元素上面，添加一个远程的地址的链接 ...

回到编辑器 .... 先注释掉这几行 JavaScript 的代码 .... command + / ，windows 上应该是 ctrl + /

然后找到 登录 链接 ... 直接在这个链接的 href 属性里面，设置一下要载入到对话框里显示的地址 ... 这里就是 login-form.html ...

保存 ... 再回到浏览器 ...

点击 登录 .. 同样会显示这个对话框 ...

另外还有一种方法，就是可以通过 data 属性 ... 回到编辑器 ...

找到 登录 菜单 ... 先去掉在它的 href 属性里的东西 ...

然后找到对话框元素 ... 在上面，添加一个 data-remote .... 它的值，可以设置成一个要载入到这个对话框里显示的地址 ...

data-remote="login-form.html"

保存 ... 再回到浏览器上去试一下 ...

点击 登录 ... 同样，也会显示这个对话框 ....