bootstrap模態方塊如何提交表單

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 id="添加数据字典">添加数据字典</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模態方塊如何提交表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！