<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h3
> Blaze UI Full Screen Modal</
h3
>
<
button
type
=
"button"
class="c-button
c-button--brand"
onClick
=
"openModal()"
>
Show Full Screen Modal
</
button
>
<
div
role
=
"dialog"
class
=
"o-modal o-modal--full"
style
=
"background:gainsboro;"
id
=
"modal"
>
<
button
type
=
"button"
class="c-button
c-button--close"
onclick
=
"closeModal()"
>
×
</
button
>
<
h1
class
=
"c-heading u-super"
>
GeeksforGeeks is a computer science portal
</
h1
>
<
h1
class
=
"c-heading u-xlarge"
>
GeeksforGeeks is a computer science portal
</
h1
>
<
h1
class
=
"c-heading u-large"
>
GeeksforGeeks is a computer science portal
</
h1
>
<
footer
class
=
"c-card__footer"
>
<
button
type
=
"button"
class="c-button
c-button--brand"
onClick
=
"closeModal()"
>
Close
</
button
>
</
footer
>
</
div
>
<
script
>
function closeModal() {
document.getElementById("modal")
.classList.remove("o-modal--visible");
}
function openModal() {
document.getElementById("modal")
.classList.add("o-modal--visible");
}
</
script
>
</
body
>
</
html
>