<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Bootstrap 5 - GeeksforGeeks</
title
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"my-4"
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
strong
>Bootstrap 5 Varying Modal Content</
strong
>
</
div
>
<
button
class
=
"btn btn-success"
data-bs-toggle
=
"modal"
data-bs-target
=
"#mymodal"
data-bs-heading
=
"GeeksforGeeks Practice Portal"
data-bs-footercontent
=
"Visit the Practice Portal for more details"
data-bs-modalcontent="Using GFG's Practice portal you can
practice on you problem solving skills.">
Open Modal for Practice Portal
</
button
>
<
button
class
=
"btn btn-warning"
data-bs-toggle
=
"modal"
data-bs-target
=
"#mymodal"
data-bs-heading
=
"GeeksforGeeks Courses"
data-bs-footercontent
=
"Visit the Courses for more details"
data-bs-modalcontent="There are lot of free as well as
paid courses offered by GeeksforGeeks which help
you to improve your skills.">
Open Modal for Courses
</
button
>
<
button
class
=
"btn btn-info"
data-bs-toggle
=
"modal"
data-bs-target
=
"#mymodal"
data-bs-heading
=
"GeeksforGeeks Job Portal"
data-bs-footercontent
=
"Visit the Job Portal for more details"
data-bs-modalcontent="GeeksforGeeks Job Portal helps
you finding a good high paying job if you have skills.">
Open Modal for Job Portal
</
button
>
<
div
class
=
"modal"
id
=
"mymodal"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
h3
class
=
"modal-title"
>Placeholder Title</
h3
>
</
div
>
<
div
class
=
"modal-body"
>
Placeholder Content
</
div
>
<
div
class
=
"modal-footer text-center"
>
Placeholder Footer
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
const myModal = document.querySelector('#mymodal');
myModal.addEventListener('show.bs.modal', function(event) {
// Get the reference of the triggering button
const button = event.relatedTarget;
// Get the data for inserting into modal
const heading = button.getAttribute('data-bs-heading');
const modalcontent = button.getAttribute('data-bs-modalcontent');
const footercontent = button.getAttribute('data-bs-footercontent');
// Set the value in the modal
myModal.querySelector('.modal-title').textContent = heading;
myModal.querySelector('.modal-body').textContent = modalcontent;
myModal.querySelector('.modal-footer').textContent = footercontent;
});
</
script
>
</
body
>
</
html
>