Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to pass data into a bootstrap modal?
Bootstrap is a CSS framework allowing developers to style HTML elements without writing any CSS code. We can use pre-defined classes of Bootstrap with HTML elements to style them.
The Bootstrap also contains the modal. The simple meaning of the modal is the pop-up box. For example, an alert box, payment box, etc.
In this tutorial, we will learn to add data to the bootstrap modal using JavaScript or JQuery. One scenario when we require to add data to the bootstrap modal is that we allow users to select any product. After that, we need to open a payment modal containing the data of that particular product.
Syntax
Users can follow the syntax below to pass data into a bootstrap modal.
$('.modal-body').html(content);
In the above syntax, we accessed the HTML element with the ‘modal-body’ class name and used the html() method to add content to the modal body.
Example 1
In the example below, we used Bootstrap CDN in the <head> tag to use the Bootstrap modal in HTML code. After that, we added the button to open the bootstrap modal.
Next, we added the bootstrap modal containing the header and body. Currently, the body doesn’t contain any text. In JQuery, we access the modal body using the class name and the html() method to add HTML content to the body.
In the output, users can click the button to open the Bootstrap modal and observe the data added by JQuery in the modal body.
<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>
Example 2
We created the input fields in the example below to get the product information. We allow users to add product names, quantities, and total prices in the input field.
Next, we created the button. When users click the button, it will access the input values and add them to the modal body.
In the output, users can try to fill in the input values and click the button to see input data in the modal body.
<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>
We learned to add HTML content to the modal body using JavaScript. Also, we learned to add custom data into the modal body. We need to access the modal body using the appropriate selector and use html() method to add the data.
2K+ Views
