<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1, shrink-to-fit=no"
>
<
link
rel
=
"stylesheet"
integrity
=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin
=
"anonymous"
>
<
title
>bootstrap | Modal</
title
>
<
style
>
h1,
h6 {
margin: 2%;
}
.btn {
margin-left: 2%;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green;"
>GeeksforGeeks</
h1
>
<
button
type
=
"button"
class
=
"btn btn-primary"
data-toggle
=
"modal"
data-target
=
"#exampleModal"
>
Launch Modal
</
button
>
<
div
class
=
"modal fade"
id
=
"exampleModal"
tabindex
=
"-1"
role
=
"dialog"
aria-labelledby
=
"exampleModalLabel"
aria-hidden
=
"true"
>
<
div
class
=
"modal-dialog"
role
=
"document"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
h3
class
=
"modal-title"
id
=
"exampleModalLabel"
style
=
"color:green;"
>
GeeksforGeeks</
h3
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"modal"
aria-label
=
"Close"
>
<
span
aria-hidden
=
"true"
>×</
span
>
</
button
>
</
div
>
<
div
class
=
"modal-body"
>
<
div
class
=
"container"
>
<
p
>This
<
button
style
=
"color:green;"
data-toggle
=
"popover"
title
=
"popover-title"
data-content
=
"popover-content"
>
GeeksforGeeks
</
button
>triggers a popover on click.</
p
>
</
div
>
<
script
>
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
</
script
>
<
div
class
=
"container"
>
<
p
>This <
a
style
=
"color:green;"
data-toggle
=
"tooltip"
title
=
"Tooltip"
>
GeeksforGeeks
</
a
> will show a tooltip on hover.
</
p
>
</
div
>
<
script
>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</
script
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class
=
"btn btn-secondary"
data-dismiss
=
"modal"
>
Close</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>okay</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
integrity
=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin
=
"anonymous"
>
</
script
>
integrity
=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin
=
"anonymous"
>
</
script
>
integrity
=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin
=
"anonymous"
>
</
script
>
</
center
>
</
body
>
</
html
>