<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
/>
<
script
src
=
integrity
=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
div
class
=
"container mt-3"
style
=
"width: 700px;"
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
button
type
=
"button"
class
=
"btn btn-primary"
data-toggle
=
"modal"
data-target
=
"#exampleModal"
data-whatever
=
"@geeksforgeeks"
>
Send email to @geeksforgeeks
</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
data-toggle
=
"modal"
data-target
=
"#exampleModal"
data-whatever
=
"@gurrrung"
>
Send email to author @gurrrung
</
button
>
<
div
class
=
"modal fade"
id
=
"exampleModal"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
h5
class
=
"modal-title"
>
New message
</
h5
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"modal"
aria-label
=
"Close"
>
<
span
aria-hidden
=
"true"
>
×
</
span
>
</
button
>
</
div
>
<
div
class
=
"modal-body"
>
<
form
>
<
div
class
=
"mb-3"
>
<
label
for
=
"recipient-name"
class
=
"col-form-label"
>
Recipient:
</
label
>
<
input
type
=
"text"
class
=
"form-control"
id
=
"recipient-name"
/>
</
div
>
<
div
class
=
"mb-3"
>
<
label
for
=
"message-text"
class
=
"col-form-label"
>
Message:
</
label
>
<
textarea
class
=
"form-control"
id
=
"message-text"
>
</
textarea
>
</
div
>
</
form
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class
=
"btn btn-secondary"
data-dismiss
=
"modal"
>
Close
</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>
Send message
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
var exampleModal =
document.getElementById("exampleModal");
exampleModal.addEventListener(
"show.bs.modal", function (event) {
// Button that triggered the modal
var button = event.relatedTarget;
// Extract info from data-* attributes
var recipient =
button.getAttribute("data-whatever");
// Update the modal's content.
var modalTitle =
exampleModal.querySelector(".modal-title");
var modalBodyInput =
exampleModal.querySelector(".modal-body input");
modalTitle.textContent =
"New message to " + recipient;
modalBodyInput.value = recipient;
});
</
script
>
</
body
>
</
html
>