bootstrap模态框中表单怎么提交表单 表单中的表单如何提交？
php+bootstrap3\u5229\u7528\u6a21\u6001\u6846\u63d0\u4ea4\u8868\u5355\uff0c\u6d4b\u8bd5\u53d1\u73b0\u63d0\u4ea4\u4e0d\u8fc7\u53bb\u503cinput \u5143\u7d20\u6ca1\u6709name ,\u6240\u4ee5\u6570\u636e\u5c31\u7b97\u63d0\u8fc7\u53bb\u4e86\uff0c\u4f60\u4e5f\u53d6\u4e0d\u5230
\u8868\u5355\u4e0d\u80fd\u88ab\u5d4c\u5957,\u6362\u601d\u8def\u5427,\u7528JS\u52a8\u6001\u521b\u5efa\u8868\u5355\u5143\u7d20\u548c\u4fee\u6539\u8868\u5355\u5c5e\u6027,\u901a\u8fc7\u539f\u6709\u8868\u5355\u8fdb\u884c\u6570\u636e\u63d0\u4ea4.\u6bd4\u5982\u4f60\u53ef\u4ee5\u5728\u9700\u8981\u65f6\u5c06\u8868\u5355\u7684action\u5c5e\u6027\u4fee\u6539\u4e3aurl1\u7136\u540e\u8c03\u7528submit,\u5728\u53e6\u5916\u7684\u65f6\u4fee\u5c06action\u4fee\u6539\u4e3aurl2\u5e76submit.
\u6216\u8005,\u901a\u8fc7JS\u521b\u5efa\u4e00\u4e2a\u65b0\u8868\u5355,\u7136\u540e\u901a\u8fc7Ajax\u63d0\u4ea4,\u8fd9\u6837\u53ea\u9700\u5728\u539f\u8868\u5355\u4e2d\u52a0\u4e00\u4e2a\u6309\u94ae\u6216\u94fe\u63a5\u6765\u89e6\u53d1\u8fd9\u6837\u7684JS\u51fd\u6570.
\u518d\u6216\u8005,\u901a\u8fc7JS\u5728body\u4e2d\u63d2\u5165\u4e00\u4e2a\u65b0\u8868\u5355,\u5c06\u4f60\u8981\u63d0\u4ea4\u7684\u6570\u636e\u590d\u5236\u5230\u8be5\u8868\u5355\u4e2d,\u7136\u540e\u8c03\u7528submit.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击我显示模态框</button>
<!-- 定义模态框触发器，此处为按钮触发 -->
<form method="post" action="index.html" 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>
</body>
</html>
1、你得到配置文件中去配置这个form表单所对应的后台操作类
2、然后建立对应的后台操作类进行逻辑操作，返回结果
提交表单的话<form>标签放在模态框的<div>标签外面
建议使用ajax
绛旓細-- 瀹氫箟妯℃佹瑙﹀彂鍣紝姝ゅ涓烘寜閽Е鍙 -->
绛旓細Bootstrap 妯℃佹鏄竴涓交閲忕骇鐨勫鐢ㄩ擩avaScript寮瑰嚭绐楀彛锛屽彲鑷畾涔夊拰鍝嶅簲寮忋傚彲浠ヤ娇鐢ㄥ畠鍦ㄧ綉绔欎腑鏄剧ず璀﹀憡绐楀彛銆佽棰戝拰鍥剧墖銆備娇鐢˙ootstrap鏋勫缓鐨勭綉绔欏彲浠ヤ娇鐢ㄦā鎬佹鏉ユ樉绀烘潯娆惧拰鏉′欢锛堜綔涓烘敞鍐岃繃绋嬬殑涓閮ㄥ垎锛夛紝瑙嗛锛岀敋鑷崇ぞ浜ゅ獟浣撳皬閮ㄤ欢銆備负浜嗗彲浠ユ洿濂藉湴鐞嗚В瀹冿紝鎴戜滑鏉ョ湅涓涓Bootstrap妯℃佹鐨勫悇涓粍鎴愰儴鍒嗐侭...
绛旓細a href="#myModal" role="button" class="btn" data-toggle="modal">鎵撳紑瀵硅瘽妗 杩欐牱鍙兘鎶婇潤鎬佸唴瀹瑰湪瀵硅瘽妗嗕腑鏄剧ず鍑烘潵锛屼娇鐢ㄥ璇濇鐨 remote 閫夐」鍙互瀹炵幇鏇村己澶х殑鏁堟灉銆 2. 浣跨敤 remote 閫夐」璁妯℃瀵硅瘽妗嗗姞杞介〉闈㈠埌 .modal-body 涓 鏈変袱绉嶆柟娉 ...
绛旓細input 鍏冪礌娌℃湁name ,鎵浠ユ暟鎹氨绠楁彁杩囧幓浜嗭紝浣犱篃鍙栦笉鍒
绛旓細Bootstrap 鐨妯℃佹绫绘彁渚涗簡涓浜涗簨浠剁敤浜庣洃鍚苟鎵ц浣犺嚜宸辩殑浠ｇ爜銆備簨浠剁被鍨 鎻忚堪 show.bs.modal show 鏂规硶璋冪敤涔嬪悗绔嬪嵆瑙﹀彂璇ヤ簨浠躲傚鏋滄槸閫氳繃鐐瑰嚮鏌愪釜浣滀负瑙﹀彂鍣ㄧ殑 鍏冪礌锛屽垯姝ゅ厓绱犲彲浠ラ氳繃浜嬩欢鐨剅elatedTarget 灞炴ц繘琛岃闂俿hown.bs.modal 姝や簨浠跺湪妯℃佹宸茬粡鏄剧ず鍑烘潵锛堝苟涓斿悓鏃跺湪 CSS 杩囨浮鏁...
绛旓細鍥犱负浣犺繖涓槸涓ゅ眰妯℃佹锛bootstrap涓鏈夎鏄庣殑锛屾ā鎬佹鏈濂戒笉瑕佸祵濂楋紝浼氬嚭鐜癰ug鐨勩
绛旓細涓嶈鐩存帴鍐 px锛岀敤 bootstrap 鎻愪緵鐨 class锛.modal-sm锛屽ソ鍍忔槸鍔犲湪 .modal-dialog 鍚庨潰锛夈傜洿鎺ュ啓 style="xxx" 鎴戣涓轰笉鏄ソ鐨勫仛娉曪紝涓簡鈥滃搷搴斿紡鈥濆竷灞鐨勮涔夈傝鍙傝冨畼鏂规枃妗ｇ殑渚嬪瓙锛 × Modal title One fine body… ...
绛旓細妯℃佹(Modal)鏄鐩栧湪鐖剁獥浣撲笂鐨勫瓙绐椾綋銆傞氬父,鐩殑鏄樉绀烘潵鑷竴涓崟鐙殑婧愮殑鍐呭,鍙互鍦ㄤ笉绂诲紑鐖剁獥浣撶殑鎯呭喌涓嬫湁涓浜涗簰鍔ㄣ傚瓙绐椾綋鍙彁渚涗俊鎭佷氦浜掔瓑銆 濡傛灉鎮ㄦ兂瑕佸崟鐙紩鐢ㄨ鎻掍欢鐨勫姛鑳,閭ｄ箞鎮ㄩ渶瑕佸紩鐢 modal.js銆傛垨鑰,姝ｅ Bootstrap 鎻掍欢姒傝 涓绔犱腑鎵鎻愬埌,鎮ㄥ彲浠ュ紩鐢 bootstrap.js 鎴栧帇缂╃増鐨 bootstrap.min...
绛旓細Bootstrap鏄竴绉嶅墠绔紑鍙戞鏋躲侭ootstrap鏄竴涓紑婧愮殑闆嗘垚妗嗘灦锛屼富瑕佺敤浜庡揩閫熷紑鍙戝搷搴斿紡鍜岀Щ鍔ㄤ紭鍏堢殑Web椤圭洰銆傚畠鍖呭惈浜咹TML銆丆SS鍜孞avaScript绛夊绉峸eb寮鍙戞妧鏈紝鎻愪緵浜嗕赴瀵岀殑UI缁勪欢鍜屽搷搴斿紡鐨勫竷灞鏂规硶锛屽彲浠ュ府鍔╁紑鍙戣呮彁楂樺紑鍙戞晥鐜囧拰浠ｇ爜璐ㄩ噺銆備互涓嬫槸鍏充簬Bootstrap鐨勮缁嗚В閲婏細涓銆丅ootstrap鐨勫熀鏈粙缁 Bootstrap...
绛旓細寤虹珛妯℃瀵硅瘽妗 1.閫夋嫨File/New/MFC AppWizard[exe]锛孭roject name涓篢est,鍗曞嚮OK.2.閫夋嫨Single document,鍗曞嚮Finish.3.閫夋嫨宸︿晶Workspace/ResourceView,鍦―ialog涓婂崟鍑诲彸閿,閫夋嫨Insert Dialog,榛樿鍚嶅瓧涓篒DD_DIALOG1.4.鍙屽嚮鍙充晶宸ヤ綔鍖轰腑鐨勫璇濇,寮瑰嚭涓瀵硅瘽妗咥dding a Class,榛樿閫夋嫨Create a new class,...
