本文摘自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字体图标怎么引用
bootstrap 分页的实现方法
bootstrap用处大吗
bootstrap与vue区别
bootstrap与angularjs区别
bootstrap 怎么隐藏元素
bootstrap怎么让图片自适应屏幕
bootstrap 如何修改css样式
bootstrap的好处
bootstrap如何设置鼠标悬停提示
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap模态框如何提交表单