本文摘自PHP中文网,作者藏色散人,侵删。
bootstrap模态框提交表单的方法:首先打开相应的代码文件;然后直接把form表单写在模态框的modal-body里;最后设置action提交时要跳转的链接即可。
本教程操作环境:Windows7系统、bootsrap3.3.7版,该方法适用于所有品牌电脑。
推荐:《bootstrap教程》《css视频教程》
bootstrap模态框提交表单
直接把form表单写在模态框的modal-body里,和正常的form表单一样处理,action=提交时要跳转的链接。
如果按照bootstrap的模态框架构来,最后的保存要放在form外,但是提交按钮放在form之外则不能提交表单,所以要放在form之内。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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模态框如何提交表单的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap css冲突吗
bootstrap 为什么只能默认12列
bootstrap如何设置行间距
bootstrap如何限定日期选择器可选时间范围?(代码示例)
bootstrap的清除浮动
bootstrap插件是什么
bootstrap是ui框架吗
bootstrap删格系统如何理解
bootstrap和css区别
bootstrap如何消除浮动
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap模态框如何提交表单