广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
bootstrap模态框提交表单的方法:首先打开相应的代码文件;然后直接把form表单写在模态框的modal-body里;最后设置action提交时要跳转的链接即可。
本教程操作环境:Windows7系统、bootsrap3.3.7版,该方法适用于所有品牌电脑。
推荐:《bootstrap教程》《css视频教程》
bootstrap模态框提交表单
直接把form表单写在模态框的modal-body里,和正常的form表单一样处理,action=提交时要跳转的链接。
如果按照bootstrap的模态框架构来,最后的保存要放在form外,但是提交按钮放在form之外则不能提交表单,所以要放在form之内。
<div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">添加数据字典</h4> </div> <div class="modal-body"> <form class="form-horizontal" role="form" id="add-key-form" action="system/dic-save.json" method="post"> <div class="form-group"> <label class="col-sm-2 control-label"><i class="required">* </i>键:</label> <div class="col-sm-4"> <input type="text" class="form-control" name="keyName" placeholder="请输入字典键"/> </div> <label class="col-sm-2 control-label"><i class="required">* </i>值:</label> <div class="col-sm-4"> <input type="text" class="form-control" name="keyValue" placeholder="请输入字典值"> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">保存</button> </div></form> </div></div>登录后复制
更多编程相关知识,请访问:编程教学!!
以上就是bootstrap模态框如何提交表单的详细内容,更多请关注9543建站博客其它相关文章!
发表评论