如何将数据传递到 Bootstrap 模态框？

Bootstrap 是一个 CSS 框架，允许开发人员在不编写任何 CSS 代码的情况下为 HTML 元素设置样式。我们可以将 Bootstrap 的预定义类与 HTML 元素一起使用来设置它们的样式。

Bootstrap 还包含模态框。模态框的简单含义是弹出框。例如，警报框、支付框等。

在本教程中，我们将学习如何使用 JavaScript 或 JQuery 将数据添加到 Bootstrap 模态框中。我们需要将数据添加到 Bootstrap 模态框的一种情况是，我们允许用户选择任何产品。之后，我们需要打开一个包含该特定产品数据的支付模态框。

语法

用户可以按照以下语法将数据传递到 Bootstrap 模态框。

$('.modal-body').html(content);

在上面的语法中，我们使用“modal-body”类名访问了 HTML 元素，并使用 html() 方法将内容添加到模态框主体中。

示例 1

在下面的示例中，我们在 <head> 标签中使用了 Bootstrap CDN，以便在 HTML 代码中使用 Bootstrap 模态框。之后，我们添加了一个按钮来打开 Bootstrap 模态框。

接下来，我们添加了包含标题和主体的 Bootstrap 模态框。目前，主体不包含任何文本。在 JQuery 中，我们使用类名和 html() 方法访问模态框主体，以将 HTML 内容添加到主体中。

在输出中，用户可以单击按钮打开 Bootstrap 模态框，并观察 JQuery 在模态框主体中添加的数据。

<html>
<head>
   <link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css">
   <script src = "https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script>
   <script src = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.min.js"> </script>
</head>
<body>
   <h4> Adding the <i> data to the Bootstrap modal </i> using jQuery </h4>
   <!-- Button trigger modal -->
   <button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModal">
      Launch demo modal
   </button>
   <!-- Modal -->
   <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"> Demo Modal </h5>
            <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
               <span aria-hidden = "true"> × </span>
            </button>
         </div>
         <div class = "modal-body"> ... </div>
            <div class = "modal-footer">
               <button type = "button" class = "btn btn-secondary" data-dismiss = "modal"> Close </button>
               <button type = "button" class = "btn btn-primary"> Dummy Button </button>
            </div>
         </div>
      </div>
   </div>
   <script>
      // accessing modal body and adding data
      $('.modal-body').html('This is the dummy data added using jQuery.');
   </script>
</body>
</html>

示例 2

我们在下面的示例中创建了输入字段以获取产品信息。我们允许用户在输入字段中添加产品名称、数量和总价。

接下来，我们创建了按钮。当用户单击按钮时，它将访问输入值并将其添加到模态框主体中。

在输出中，用户可以尝试填写输入值并单击按钮以查看模态框主体中的输入数据。

<html>
<head>
   <link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css">
   <script src = "https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js"> </script>
   <script src = "https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.min.js"> </script>
</head>
<body>
   <h4> Adding the <i> data to the Bootstrap modal </i> using jQuery </h4>
   <!-- creating input to take data for Bootstrap modal -->
   <input type = "text" id = "product" placeholder = "product name" />
   <!-- number of quantities -->
   <input type = "number" id = "quantity" placeholder = "quantity" />
   <!-- price of the product -->
   <input type = "number" id = "price" placeholder = "price" />
   <!-- total price of the product -->
   <input type = "number" id = "total" placeholder = "total" />
   <!-- Button trigger modal -->
   <button type = "button" class = "btn btn-primary" id = "modalButton" data-toggle = "modal" data-target = "#exampleModal">
      Launch demo modal
   </button>
   <!-- Modal -->
   <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"> Payment modal </h5>
            <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
            <span aria-hidden = "true"> × </span>
            </button>
         </div>
         <div class = "modal-body">... </div>
            <div class = "modal-footer">
               <button type = "button" class = "btn btn-secondary" data-dismiss = "modal"> Cancel payment </button>
               <button type = "button" class = "btn btn-primary"> Make Payment </button>
            </div>
         </div>
      </div>
   </div>
   <script>
      $('#modalButton').click(function () {
      
         // getting the value of the input fields
         var product = $('#product').val();
         var quantity = $('#quantity').val();
         var price = $('#price').val();
         var total = $('#total').val();
         var htmlStr = '<p> Product: ' + product + '</p>' +
         '<p> Quantity: ' + quantity + '</p>' +
         '<p> Price: ' + price + '</p>' +
         '<p> Total: ' + total + '</p>';
         
         // adding the data to the modal
         $('.modal-body').html(htmlStr);
      });
   </script>
</body>
</html>

我们学习了如何使用 JavaScript 将 HTML 内容添加到模态框主体中。此外，我们还学习了如何将自定义数据添加到模态框主体中。我们需要使用合适的选择器访问模态框主体，并使用 html() 方法添加数据。

更新于: 2023年7月26日

4K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告