<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
.container {
margin-top: 25px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered content"
>
<
h1
class
=
"title has-text-success"
>
GeeksforGeeks
</
h1
>
<
h2
class
=
"subtitle"
>
Bulma Modal JavaScript Implementation
</
h2
>
<
div
class
=
"container"
>
<
div
class
=
"modal"
id
=
"modal1"
>
<
div
class
=
"modal-background"
></
div
>
<
div
class
=
"modal-card"
>
<
header
class
=
"modal-card-head"
>
<
p
class
=
"modal-card-title"
>
GeeksforGeeks
</
p
>
<
button
class
=
"delete"
aria-label
=
"close"
>
</
button
>
</
header
>
<
section
class
=
"modal-card-body"
>
<
h1
>Hey Geek!</
h1
>
<
p
>
Learn all CS fundamentals, do
programming, participate in
contests, an many more.
</
p
>
</
section
>
<
footer
class
=
"modal-card-foot"
>
<
button
class
=
"button is-danger"
>
Cancel
</
button
>
</
footer
>
</
div
>
</
div
>
<
button
onclick
=
"openModal();"
class
=
"button is-success"
>
Open Modal
</
button
>
</
div
>
<
script
>
// Function to open the modal
function openModal() {
// Add is-active class on the modal
document.getElementById("modal1")
.classList.add("is-active");
}
// Function to close the modal
function closeModal() {
document.getElementById("modal1")
.classList.remove("is-active");
}
// Add event listeners to close the modal
// whenever user click outside modal
document.querySelectorAll(
".modal-background, .modal-close,.modal-card-head .delete, .modal-card-foot .button"
).forEach(($el) => {
const $modal = $el.closest(".modal");
$el.addEventListener("click", () => {
// Remove the is-active class from the modal
$modal.classList.remove("is-active");
});
});
// Adding keyboard event listeners to close the modal
document.addEventListener("keydown", (event) => {
const e = event || window.event;
if (e.keyCode === 27) {
// Using escape key
closeModal();
}
});
</
script
>
</
body
>
</
html
>