<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI Dimmer Disabled State</
title
>
<
link
href
=
rel
=
"stylesheet"
/>
<
script
src
=
integrity
=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
style
=
"width: 100vw; height: 100vh;"
>
<
div
class
=
"ui container"
>
<
h2
style
=
"color: green;"
>GeeksForGeeks</
h2
>
<
h4
>Semantic UI Dimmer Disabled State</
h4
>
<
hr
>
<
br
/>
<
div
class
=
"ui segment"
>
<
div
class
=
"ui dimmer"
></
div
>
<
p
>
Greetings to all the Geeks out there! We welcome
you to the platform where we consistently strive
to offer the best of education.
</
p
>
<
p
>
This platform has been designed for every geeks
wishing to expand knowledge, share their knowledge
and is ready to grab their dream job. We have millions
of articles,live as well as online courses, thousands
of tutorials and much more just for the geek inside you.
Thank you for choosing and supporting us!
</
p
>
<
p
>
GeeksForGeeks is an amazing website to learn coding.
</
p
>
<
p
>
Machine Learning, Web Development, Android Development,
Data Science, you name it, it's all available on
GeeksForGeeks.
</
p
>
</
div
>
<
button
class
=
"ui button"
onclick
=
"enable()"
>Enable</
button
>
<
button
class
=
"ui button"
onclick
=
"disable()"
>Disable</
button
>
<
button
class
=
"ui button"
onclick
=
"hide()"
>Hide</
button
>
<
button
class
=
"ui button"
onclick
=
"show()"
>Show</
button
>
</
div
>
<
script
>
const dimmer = document.querySelector(".dimmer");
const enable = () => {
dimmer.classList.remove("disabled");
}
const disable = () => {
dimmer.classList.add("disabled");
}
const hide = () => {
$('.dimmer').dimmer('show');
}
const show = () => {
$('.dimmer').dimmer('hide');
}
</
script
>
</
body
>
</
html
>