<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
'stylesheet'
href
=
<
style
>
.container {
margin-top: 25px;
}
</
style
>
</
head
>
<
body
class
=
"has-text-centered"
>
<
h1
class
=
"is-size-2 has-text-success"
>
GeeksforGeeks</
h1
>
<
b
>Bulma Image Modal</
b
>
<
div
class
=
"container"
>
<
div
id
=
"modal1"
class
=
"modal"
>
<
div
class
=
"modal-background"
></
div
>
<
div
class
=
"modal-content"
>
<
p
class
=
"image is-1by1"
>
<
img
src
=
alt
=
"GeeksforGeeks Logo"
>
</
p
>
</
div
>
<
button
class
=
"modal-close is-large"
aria-label
=
"close"
>
</
button
>
</
div
>
<
button
onclick
=
"openModal();"
class
=
"button is-primary"
>
Open the Modal
</
button
>
</
div
>
<
script
>
// JavaScript code to open and close the modal
// Function to open the modal
function openModal() {
// Add is-active class on the modal
document.getElementById("modal1")
.classList.add("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");
});
});
</
script
>
</
body
>
</
html
>