<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var btn = document.getElementById("showText");
btn.addEventListener("click", function() {
document.getElementById("text").style.display = "block";
var myModal =
bootstrap.Modal.getInstance(document.getElementById("myModal"));
myModal.handleUpdate();
});
});
</script>
</head>
<body>
<div class="m-4">
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Modal Options</h4>
<button type="button"
class="btn btn-lg btn-success mt-4"
data-bs-toggle="modal"
data-bs-target="#myModal">
Launch Modal
</button>
<div id="myModal"
class="modal fade"
tabindex="-1"
data-bs-backdrop="false"
data-bs-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
This is main modal with
no backdrop and Keyboard utility
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<p>
<button type="button"
id="showText"
class="btn btn-link">
Click here to see more
about Data Structures.
</button>
</p>
<div style="display:none;" id="text">
<p>
A data structure is a storage that
is used to store and organize data.
</p>
<p>
It is a way of arranging data on a
computer so that it can be accessed and
updated efficiently.
</p>
<p>
A data structure is not only used
for organizing the data.
</p>
<p>
It is also used for processing,
retrieving, and storing data.
</p>
<p>
There are different basic and advanced
types of data structures that are used
in almost every program or software system
that has been developed. So we must
have good knowledge about data structures.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-danger"
data-bs-dismiss="modal">
Ok, I got it
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>