bootstrap模态框如何提交表单

撸码网

2023-10-05 12:53:18

0次

1. 关于bootstrap模态框

Bootstrap是一个流行的前端框架，它包含用于构建现代Web应用程序的CSS，HTML和JavaScript工具。Bootstrap的最大的优点是它使用高质量的设计原则，专门用于响应式网页设计和移动设备友好。Bootstrap模态框是一种可用于网页中的弹出框，通常用于显示与另一内容相关的可见信息，或用于图像，视频甚至表单的弹出。本文将介绍如何构建一个Bootstrap模态框以提交一个表单。

2. 创建一个基础的Bootstrap模态框

要创建一个Bootstrap模态框，我们需要使用Bootstrap的JavaScript插件。该插件包含在Bootstrap的JavaScript文件中，在使用该模态框的HTML文件中包含该文件即可。



<!DOCTYPE html>


<html>


  <head>


    <title>Bootstrap Modal Form</title>


    <!-- 引入Bootstrap框架 -->


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"


      integrity="sha384-OgVRvuATP1z7J+3nOZwG4UsGc5kyYz3+MnktZwuM6v9vZLlK4k5boZQLMktwM2nT"


      crossorigin="anonymous">


  </head>


  <body>


    <!-- 创建一个按钮 -->


    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">


      Launch demo modal


    </button>


    <!-- 创建一个模态框 -->


    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"


      aria-hidden="true">


      <div class="modal-dialog" role="document">


        <div class="modal-content">


          <div class="modal-header">


            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>


            <button type="button" class="close" data-dismiss="modal" aria-label="Close">


              <span aria-hidden="true">&times;</span>


            </button>


          </div>


          <div class="modal-body">


            <p>Modal body text goes here.</p>


          </div>


          <div class="modal-footer">


            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>


            <button type="button" class="btn btn-primary">Save changes</button>


          </div>


        </div>


      </div>


    </div>


    <!-- 引入Bootstrap的JavaScript文件 -->


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"


      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"


      crossorigin="anonymous"></script>


    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI5UksdQRVvoxMfooAo"


      crossorigin="anonymous"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"


      integrity="sha384-OgVRvuATP1z7J+3nOZwG4UsGc5kyYz3+MnktZwuM6v9vZLlK4k5boZQLMktwM2nT"


      crossorigin="anonymous"></script>


  </body>


</html>

上述代码将创建一个基础的Bootstrap模态框，其中包含一个按钮和一个模态框。点击按钮将触发打开模态框。

3. 在模态框中创建表单

要在Bootstrap模态框中创建表单，我们只需要在模态框的“<div>”标签的“class”属性中添加“modal-dialog-centered”类，然后在“<div class='modal-body'>”中创建表单。可根据需要添加表单项。例如，在本文中，我们将在表单中添加一个文本输入框，并在表单的最后添加了一个提交按钮。以下是示例代码：



<!DOCTYPE html>


<html>


  <head>


    <title>Bootstrap Modal Form</title>


    <!-- 引入Bootstrap框架 -->


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"


      integrity="sha384-OgVRvuATP1z7J+3nOZwG4UsGc5kyYz3+MnktZwuM6v9vZLlK4k5boZQLMktwM2nT"


      crossorigin="anonymous">


  </head>


  <body>


    <!-- 创建一个按钮 -->


    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">


      Launch demo modal


    </button>


    <!-- 创建一个模态框 -->


    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"


      aria-hidden="true">


      <div class="modal-dialog modal-dialog-centered" role="document">


        <div class="modal-content">


          <div class="modal-header">


            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>


            <button type="button" class="close" data-dismiss="modal" aria-label="Close">


              <span aria-hidden="true">&times;</span>


            </button>


          </div>


          <div class="modal-body">


            <form>


              <div class="form-group">


                <label for="exampleInputEmail1">Email address</label>


                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"


                  placeholder="Enter email">


                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone


                  else.</small>


              </div>


              <button type="submit" class="btn btn-primary">Submit</button>


            </form>


          </div>


          <div class="modal-footer">


            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>


            <button type="button" class="btn btn-primary">Save changes</button>


          </div>


        </div>


      </div>


    </div>


    <!-- 引入Bootstrap的JavaScript文件 -->


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"


      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"


      crossorigin="anonymous"></script>


    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI5UksdQRVvoxMfooAo"


      crossorigin="anonymous"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"


      integrity="sha384-OgVRvuATP1z7J+3nOZwG4UsGc5kyYz3+MnktZwuM6v9vZLlK4k5boZQLMktwM2nT"


      crossorigin="anonymous"></script>


  </body>


</html>

表单的HTML代码很简单，只需要在“<form>”和“</form>”之间添加所需表单项即可。在本例中，添加了一个输入类型为电子邮件地址的文本框，可以在其中输入电子邮件地址。 您还会看到，“<div class ='form-group'>”类被用于将标签和输入框组合在一起。

4. 在模态框中提交表单

要在模态框中提交表单并将表单数据发送到服务器，可以使用jQuery处理程序。以下是示例代码，您可以在其中为表单添加submit事件处理程序：



<!DOCTYPE html>


<html>


  <head>


    <title>Bootstrap Modal Form</title>


    <!-- 引入Bootstrap框架 -->


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"


      integrity="sha384-OgVRvuATP1z7J+3nOZwG4UsGc5kyYz3+MnktZwuM6v9vZLlK4k5boZQLMktwM2nT"


      crossorigin="anonymous">


  </head>


  <body>


    <!-- 创建一个按钮 -->


    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">


      Launch demo modal


    </button>


    <!-- 创建一个模态框 -->


    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"


      aria-hidden="true">


      <div class="modal-dialog modal-dialog-centered" role="document">


        <div class="modal-content">


          <div class="modal-header">


            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>


            <button type="button" class="close" data-dismiss="modal" aria-label="Close">


              <span aria-hidden="true">&times;</span>


            </button>


          </div>


          <div class="modal-body">


            <form id="myform">


              <div class="form-group">


                <label for="exampleInputEmail1">Email address</label>


                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"


                  placeholder="Enter email">


                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone


                  else.</small>


              </div>


              <button type="submit" class="btn btn-primary">Submit</button>


            </form>


          </div>


          <div class="modal-footer">


            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>


            <button type="button" class="btn btn-primary">Save changes</button>


          </div>


        </div>


      </div>


    </div>


    <!-- 引入Bootstrap的JavaScript文件 -->


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"


      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"


      crossorigin="anonymous"></script>


    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"


      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI5UksdQRVvoxMfooAo"


      crossorigin="anonymous"></script>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"


      integrity="sha384-OgVRvuATP1z7J+3nOZwG4UsGc5kyYz3+MnktZwuM6v9vZLlK4k5boZQLMktwM2nT"


      crossorigin="anonymous"></script>


    <!-- 添加脚本 -->


    <script>


      $("#myform").submit(function (e) {


        e.preventDefault();


        var email = $("#exampleInputEmail1").val();


        alert("Your email is: " + email );


        // do whatever you want to do with the email


        $("#exampleModal").modal('hide');


      });


    </script>


  </body>


</html>

在上述代码中，我们使用jQuery为表单添加了一个submit事件处理程序。在此处理程序中，我们使用jQuery的val函数获取输入框的内容，并使用JavaScript的alert函数显示电子邮件地址。您可以使用其中包含的代码来将表单数据发送到服务器以进行进一步处理。最后，我们还使用jQuery的modal函数来关闭模态框。

总结

在本文中，我们学习了如何使用Bootstrap创建一个模态框，并向其中添加一个表单。我们还了解了如何使用jQuery提交表单并在模态框中显示表单数据。随着您继续学习Web开发，您将发现使用Bootstrap模态框来处理各种情况非常有用，从简单的弹出消息到表单、图像和视频等元素。

上一篇：Bootstrap模态窗中如何从远程加载内容？remote方法介绍

下一篇：bootstrap的栅格系统有什么用

相关阅读

前端开发标签

Bootstrap热门

Bootstrap更新

免责声明：本文来自互联网，本站所有信息（包括但不限于文字、视频、音频、数据及图表），不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等，版权归属于原作者，如无意侵犯媒体或个人知识产权，请来电或致函告之，本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流，此文观点与本站立场无关，不承担任何责任。侵权及不实信息举报邮箱至：amarlboro@yeah.net；购买联系：QQ 398402245 渝ICP备2023009929号-1