<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bulma Modal Card</
title
>
<
link
rel
=
"stylesheet"
href
=
/>
</
head
>
<
body
class
=
"has-text-centered content"
>
<
h1
class
=
"title has-text-success"
>GeeksforGeeks</
h1
>
<
h2
class
=
"subtitle"
>Bulma Modal Card</
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"
>Welcome to GeeksforGeeks</
p
>
<
button
class
=
"delete"
aria-label
=
"close"
></
button
>
</
header
>
<
section
class
=
"modal-card-body"
>
<
h1
>Hola!</
h1
>
<
p
>Welcome Geek! Learn all CS fundamentals, do programming,
participate in contests, an many more.</
p
>
<
img
src
=
alt
=
""
>
</
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 for opening the modal
function openModal()
{
// is-active class of the modal
document.getElementById("modal1").classList.add("is-active");
}
// Adding event listeners for closing the 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", () => {
// removing is-active class from modal
$modal.classList.remove("is-active");
});
});
</
script
>
</
body
>
</
html
>