ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >ブートストラップモーダルボックスでフォームを送信する方法

ブートストラップモーダルボックスでフォームを送信する方法

藏色散人
藏色散人オリジナル
2020-12-17 09:09:353262ブラウズ

ブートストラップ モーダル ボックスでフォームを送信する方法: まず、対応するコード ファイルを開き、次にモーダル ボックスのモーダル本体にフォーム フォームを直接書き込みます。最後に、アクションが実行されたときにジャンプするようにリンクを設定します。提出されました。

ブートストラップモーダルボックスでフォームを送信する方法

このチュートリアルの動作環境: Windows 7 システム、ブートラップ バージョン 3.3.7。この方法は、すべてのブランドのコンピューターに適しています。

推奨: 「ブートストラップ チュートリアル」 「css ビデオ チュートリアル

ブートストラップ モーダル ボックス送信フォーム

モーダルボックスのモーダルボディに直接フォームフォームを記述し、通常のフォームフォームと同様に処理します。アクション=送信時にジャンプするリンクです。

ブートストラップのモーダルフレームワークに従って構造化されている場合、最終保存はフォームの外に配置する必要がありますが、送信ボタンがフォームの外に配置されている場合、フォームを送信できないため、フォームの内部に配置する必要があります。形状。

<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>

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 !

以上がブートストラップモーダルボックスでフォームを送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。