如何向 Bootstrap 模态框传递数据?
bootstrapweb developmentfront end technology
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/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/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/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/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() 方法添加数据。
