在模态框中使用form表单
之前在写项目的时候用到过模态框，当时一知半解就用了网上现成的，现在又学习Bootstrap菜鸟教程，对模态框有了更深的理解。我此次把表单加入模态框，代码很简单，必要的地方都做了注释。需要的CSS、jQuery和JS我也使用了CDN的链接，复制后可以直接运行看效果。之后也会在这个代码上进行改进，例如把内容添加为登录注册的范本，还可以加上切换tab。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><title>模态框</title><link rel="stylesheet" href="http://cdn./libs/bootstrap/3.3.7/css/bootstrap.min.css"/></head><body><div class="container"><h3>创建模态框（Modal）</h3><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击我显示模态框</button><!-- 定义模态框触发器，此处为按钮触发 --><form method="post" action="#" class="form-horizontal" role="form" id="myForm" onsubmit="return "><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><!-- 定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见 --><div class="modal-dialog"><!-- 显示模态框对话框模型（若不写下一个div则没有颜色） --><div class="modal-content"><!-- 显示模态框白色背景，所有内容都写在这个div里面 --><div class="btn-info modal-header"><!-- 模态框标题 --><button type="button" class="close" data-dismiss="modal">×</button><!-- 关闭按钮 --><h4>您好，欢迎进入模态框</h4><!-- 标题内容 --></div><div class="modal-body"><!-- 模态框内容，我在此处添加一个表单 --><form class="form-horizontal" role="form"><div class="form-group"><label for="uname" class="col-sm-2 control-label">用户名</label><div class="col-sm-9"><input type="text" id="uname" name="uname" class="form-control well" placeholder="请输入用户名"/></div></div><div class="form-group"><label for="upwd" class="col-sm-2 control-label">密码</label><div class="col-sm-9"><input type="password" id="upwd" name="upwd" class="form-control well" placeholder="请输入密码"/></div></div></form></div><div class="modal-footer"><!-- 模态框底部样式，一般是提交或者确定按钮 --><button type="submit" class="btn btn-info">确定</button><button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div></div><!-- /.modal-content --></div></div> <!-- /.modal --></form></div><!-- Bootstrap的所有插件都依赖于jQuery，必须在引入bootstrap.min.js前引入jQuery --><script src="http://cdn./libs/jquery/2.1.1/jquery.min.js"></script><!-- 压缩版的bootstrap.min.js包含了所有的Bootstrap数据API插件 --><script src="http://cdn./libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>
参考网站
/bootstrap/bootstrap-modal-plugin.html
/a/1190000007651357
