<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI Modal</
title
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"ui container center aligned"
>
<
h2
class
=
"ui green header"
>
GeeksforGeeks
</
h2
>
<
h3
>
Semantic UI Modal
</
h3
>
<
div
class
=
"ui segment"
>
<
button
class
=
"ui button green"
onclick
=
"headerContent()"
>
Modal- Header Content
</
button
>
<
div
class
=
"ui modal"
id
=
"headerContent"
>
<
div
class
=
"header"
>
This is Modal Header
</
div
>
</
div
>
</
div
>
<
div
class
=
"ui segment"
>
<
button
class
=
"ui button green"
onclick
=
"contentContent()"
>
Modal- Content Content
</
button
>
<
div
class
=
"ui modal"
id
=
"contentContent"
>
<
div
class
=
"content"
>
<
p
> GeeksforGeeks Content 1</
p
>
<
p
> GeeksforGeeks Content 2 </
p
>
<
p
> GeeksforGeeks Content 3 </
p
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"ui segment"
>
<
button
class
=
"ui button green"
onclick
=
"imageContent()"
>
Modal- Image Content
</
button
>
<
div
class
=
"ui modal"
id
=
"imageContent"
>
<
div
class
=
"image content"
>
<
img
class
=
"image"
src
=
<
div
class
=
"description"
>
<
p
> GeeksforGeeks Image </
p
>
<
p
> GeeksforGeeks Image </
p
>
<
p
> GeeksforGeeks Image </
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"ui segment"
>
<
button
class
=
"ui button green"
onclick
=
"actionContent()"
>
Modal- Actions Content
</
button
>
<
div
class
=
"ui modal"
id
=
"actionContent"
>
<
div
class
=
"header"
>
GeeksforGeeks
</
div
>
<
div
class
=
"actions"
>
<
div
class
=
"ui green approve button"
>
<
i
class
=
"close icon"
></
i
>
Accepted
</
div
>
<
div
class
=
"ui red cancel button"
>
<
i
class
=
"close icon"
></
i
>
Rejected
</
div
>
</
div
>
</
div
>
<
div
class
=
"textt"
> </
div
>
</
div
>
</
div
>
<
script
>
const headerContent = () => {
$('#headerContent').modal('show');
}
const contentContent = () => {
$('#contentContent').modal('show');
}
const imageContent = () => {
$('#imageContent').modal('show');
}
const actionContent = () => {
$('#actionContent').modal('show');
}
$('#actionContent').modal({
onApprove: function () {
$('.textt').text('Accepted')
},
onDeny: function () {
$('.textt').text('Rejected')
},
})
</
script
>
</
body
>
</
html
>