首頁 > web前端 > Bootstrap教程 > bootstrap模態方塊如何提交表單

bootstrap模態方塊如何提交表單

藏色散人
發布: 2021-01-08 14:36:30
原創
3256 人瀏覽過

bootstrap模態框提交表單的方法:先開啟對應的程式碼檔案;然後直接把form表單寫在模態框的modal-body裡;最後設定action提交時要跳躍的連結即可。

bootstrap模態方塊如何提交表單

本教學操作環境: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模態方塊如何提交表單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板