为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