資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何將資料傳遞到 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/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() 方法新增資料。
更新於: 2023年7月26日
4K+ 瀏覽量
廣告