Bootstrap 模态框提交表单
来源:互联网 发布:p2p网络借贷暂行办法 编辑:程序博客网 时间:2024/09/21 08:43
在模态框中使用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.static.runoob.com/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.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 压缩版的bootstrap.min.js包含了所有的Bootstrap数据API插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></body></html>
参考网站
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
https://segmentfault.com/a/1190000007651357
阅读全文
2 0
- Bootstrap 模态框提交表单
- Bootstrap Validator 表单无法提交
- bootstrap Validator 模态框、jsp、表单验证 Ajax提交
- 使用ajax提交bootstrap表单数据
- bootstrap validator表单提交初体验 基于HTML
- bootstrap框架下实现表单提交数据重复验证
- 基于Bootstrap的表单或Ajax提交等待效果。
- Bootstrap validator 表单自动提交 和相关事件
- bootstrap 表格、表单、面板、模态框
- 一周乱弹(3-18 bootstrap模态框表单提交、jsp页面获取项目路径、bootstrap三级导航菜单、css是否显示属性)
- bootstrap表单
- bootstrap表单
- Bootstrap 表单
- Bootstrap表单
- bootstrap表单
- BootStrap表单
- Bootstrap 表单
- bootstrap表单
- Node.js学习之TCP聊天程序
- selenium环境搭建
- Spark性能优化指南——高级篇
- 常用激活函数比较
- 设定指定内存位置的值
- Bootstrap 模态框提交表单
- 安桌通过包名启动应用和关闭应用
- MaxComputeSQL-列转行和行转列
- JAVA正则表达式
- git快速入门之一:创建本地仓库并同步到远程
- nginx代理跨域,根据路径参数改变目标服务器地址
- java 学习视频教程分享
- tf.sub/tf.mul/tf.neg等api废弃
- JavaScript 浏览器事件