<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
">
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
</
head
>
<
body
class
=
"text-center mt-3"
>
<
h1
class
=
"text-success"
>GeeksforGeeks</
h1
>
<
h3
>Bootstrap Alert javascript behavior</
h3
>
<
div
id
=
"AlertDiv"
></
div
>
<
button
type
=
"button"
class
=
"btn btn-primary btn-lg"
id
=
"AlertBtn"
>
Click me to show alert
</
button
>
<
script
type
=
"text/javascript"
>
const alertPlaceholder =
document.getElementById('AlertDiv')
const alert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<
div
class
=
"alert alert-${type} alert-dismissible"
role
=
"alert"
>`,
`<
div
>${message}</
div
>`,
'<
button
type
=
"button"
class
=
"btn-close"
data-bs-dismiss
=
"alert"
aria-label
=
"Close"
></
button
>',
'</
div
>'
].join('')
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('AlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
alert('Bootstrap 5 Alert message triggered', 'danger')
})
}
</
script
>
</
body
>
</
html
>