A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. Dynamic heights can be implemented which can be really useful in a modal that changes the content shown in it. This can be achieved using the modal.handleupdate() function.
Syntax:
modalID.handleUpdate()
Example 1: The example below demonstrates how we can implement the Modal Dynamic Heights using JavaScript:
<!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 >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h4 >Bootstrap 5 Modal Dynamic heights</ h4 >
< pre class = "ml-4" >Click on the button below to open the Modal</ pre >
<!-- Button Trigger Modal -->
< button type = "button" class = "btn btn-lg btn-success mt-4" data-bs-toggle = "modal" data-bs-target = "#myModal" >
Launch Modal
</ button >
<!-- The Modal -->
< div id = "myModal" class = "modal fade" tabindex = "-1" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >This is main modal</ 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" data-bs-dismiss = "modal" >
Ok, I got it
</ button >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The example below demonstrates how we can implement the Modal Dynamic Heights using jQuery:
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
< script >
$(document).ready(function() {
$("#showText").click(function() {
$("#text").show();
$("#myModal").modal("handleUpdate");
});
});
</ script >
</ head >
< body >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h4 >Bootstrap 5 Modal Dynamic heights</ h4 >
< pre class = "ml-4" >Click on the button below to open the Modal</ pre >
<!-- Button Trigger Modal -->
< button type = "button" class = "btn btn-success" data-bs-toggle = "modal" data-bs-target = "#myModal" >
Launch Modal
</ button >
<!-- The Modal -->
< div id = "myModal" class = "modal fade" tabindex = "-1" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >
This modal has Dynamic Height using
< strong >jQuery</ strong >.
</ 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 jQuery.
</ button ></ p >
< div style = "display: none;" id = "text" >
< p >
jQuery is an open source JavaScript library that
simplifies the interactions between an HTML/CSS
document, or more precisely the Document Object
Model (DOM), and JavaScript.
</ p >
< p >
Elaborating the terms, jQuery simplifies HTML
document traversing and manipulation, browser event
handling, DOM animations, Ajax interactions,
and cross-browser JavaScript development.
</ p >
< p >
jQuery is widely famous with its philosophy of
“Write less, do more.” This philosophy can be
further elaborated as three concepts:</ p >
< ol >
< li >
< p >
Finding some elements (via CSS selectors)
and doing something with them (via jQuery methods)
i.e. locate a set of elements in the DOM, and then
do something with that set of elements.
</ p >
</ li >
< li >
< p >
Chaining multiple jQuery methods on a set of
elements Using the jQuery wrapper and implicit iteration
</ p >
</ li >
</ ol >
</ 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 >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#dynamic-heights