Bootstrap is a CSS framework used for designing web pages. Bootstrap v4.5 is the latest release. Bootstrap along with HTML and JavaScript can be used to build responsive web pages.
A modal is a popup or dialog box that requires some action to be performed. A modal. Bootstrap has inbuilt modal component. The modal consists of two parts the modal header and the modal body. Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used.
jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement.jQuery reduces the lines of code. The article demonstrates two examples where data is passed into the modal body from the HTML document body.
Example 1: In this approach, the web page consists of two input fields Name and Marks which accepts input from the user. The data entered the input fields are extracted using the ids of the respective fields using the jQuery val() method. Next the data obtained from the input fields are concatenated into a string. This string is passed to the modal body using the html() method of jQuery.
<!DOCTYPE html>
<html>
<head>
<!-- Import bootstrap cdn -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!-- Import jquery cdn -->
<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container mt-2">
<!-- Input field to accept user input -->
Name: <input type="text" name="name"
id="name"><br><br>
Marks: <input type="text" name="marks"
id="marks"><br><br>
<!-- Button to invoke the modal -->
<button type="button" class="btn btn-primary
btn-sm" data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
Confirmation
</h5>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<!-- Data passed is displayed
in this part of the
modal body -->
<h6 id="modal_body"></h6>
<button type="button"
class="btn btn-success btn-sm"
data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#submit").click(function () {
var name = $("#name").val();
var marks = $("#marks").val();
var str = "You Have Entered "
+ "Name: " + name
+ " and Marks: " + marks;
$("#modal_body").html(str);
});
</script>
</body>
</html>
Example 2:- Custom Alert Popup
Example 2: In this approach, a textarea is used to take input from the user. When the submit button is clicked, it invokes the jQuery function. The data entered the text area is extracted using the val() method into the text variable. This text string is passed to the modal body using the html() method of jQuery.
<!DOCTYPE html>
<html>
<head>
<!-- Import bootstrap cdn -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<!-- Import jquery cdn -->
<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container mt-2">
<!-- Input field to accept user input -->
<textarea id="textarea" rows="4"
cols="50">
</textarea><br>
<!-- Button to invoke the modal -->
<button type="button"
class="btn btn-success btn-sm"
data-toggle="modal"
data-target="#exampleModal"
id="submit">
Submit
</button>
<!-- modal -->
<div class="modal fade" id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
Entered Data
</h5>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<!-- Data passed is displayed
in this part of the
modal body -->
<p id="modal_body"></p>
<button type="button"
class="btn btn-warning btn-sm"
data-toggle="modal"
data-target="#exampleModal">
Proceed
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#submit").click(function () {
var text = $("#textarea").val();
$("#modal_body").html(text);
});
</script>
</body>
</html>