<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI Dimmer Content Type</
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 Content Type</
h4
>
<
hr
>
<
br
/>
<
div
class
=
"ui blurring segment"
>
<
div
class
=
"ui dimmer"
>
<
div
class
=
"content"
>
<
h2
class
=
"ui icon inverted header"
>
<
i
class
=
"star outline icon"
></
i
>
We just want to let you know
that GeeksForGeeks is Awesome!
</
h2
>
</
div
>
</
div
>
<
p
>Semantic UI is an open-source framework that uses CSS
and jQuery to build great user interfaces. It is
the same as a bootstrap for use and has great different
elements to use to make your website look more
amazing. It uses a class to add CSS to the elements.
</
p
>
<
p
>Semantic UI is an open-source framework that uses CSS
and jQuery to build great user interfaces. It is
the same as a bootstrap for use and has great different
elements to use to make your website look more
amazing. It uses a class to add CSS to the elements.
</
p
>
<
p
>Semantic UI is an open-source framework that uses CSS
and jQuery to build great user interfaces. It is
the same as a bootstrap for use and has great different
elements to use to make your website look more
amazing. It uses a class to add CSS to the elements.
</
p
>
<
p
>Semantic UI is an open-source framework that uses CSS
and jQuery to build great user interfaces. It is
the same as a bootstrap for use and has great different
elements to use to make your website look more
amazing. It uses a class to add CSS to the elements.
</
p
>
</
div
>
<
button
class
=
"ui button"
onclick
=
"openDimmer()"
>
Open
</
button
>
<
button
class
=
"ui button"
onclick
=
"closeDimmer()"
>
Close
</
button
>
</
div
>
<
script
>
const openDimmer = () => {
$('.dimmer').dimmer('show');
}
const closeDimmer = () => {
$('.dimmer').dimmer('hide');
}
</
script
>
</
body
>
</
html
>