<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Center Align Bootstrap Modal Vertically</
title
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin
=
"anonymous"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
/* Text alignment for body */
body {
text-align: center;
}
/* Styling h1 tag */
h1 {
color: green;
text-align: center;
}
/* Styling modal */
.modal .modal-content {
padding: 20px 20px 20px 20px;
-webkit-animation-name: modal-animation;
-webkit-animation-duration: 0.5s;
animation-name: modal-animation;
animation-duration: 0.5s;
}
@-webkit-keyframes modal-animation {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
@keyframes modal-animation {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
</
style
>
</
head
>
<
body
>
<
h1
>
GeeksforGeeks
</
h1
>
<
p
>
A Computer Science Portal for Geeks
</
p
>
<
a
href
=
"#signupModal"
data-toggle
=
"modal"
>
Sign-Up
</
a
>
<
div
class
=
"modal"
id
=
"signupModal"
role
=
"dialog"
aria-labelledby
=
"myModalLabel"
aria-hidden
=
"true"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"m-header"
>
<
button
class
=
"close"
data-dismiss
=
"modal"
>
×
</
button
>
<
h2
class
=
"myModalLabel"
>Sign Up</
h2
>
</
div
>
<
div
class
=
"inputs"
>
<
div
class
=
"form-group input-group"
>
<
label
for
=
"username"
class
=
"sr-only"
>
Username
</
label
>
<
span
class
=
"input-group-addon"
>
<
i
class
=
"fa fa-user"
></
i
>
</
span
>
<
input
type
=
"text"
class
=
"form-control"
id
=
"username"
placeholder
=
"Username"
>
</
div
>
<
div
class
=
"form-group input-group"
>
<
span
class
=
"input-group-addon"
>
<
i
class
=
"fa fa-envelope"
></
i
>
</
span
>
<
label
for
=
"email"
class
=
"sr-only"
>
Email
</
label
>
<
input
type
=
"email"
class
=
"form-control"
id
=
"email"
placeholder
=
"Email Address"
>
</
div
>
<
div
class
=
"form-group input-group"
>
<
span
class
=
"input-group-addon"
>
<
i
class
=
"fa fa-lock"
></
i
>
</
span
>
<
label
for
=
"password"
class
=
"sr-only"
>
Password
</
label
>
<
input
type
=
"password"
class
=
"form-control"
id
=
"password"
placeholder
=
"Choose a password"
>
</
div
>
<
div
class
=
"form-group input-group"
>
<
span
class
=
"input-group-addon"
>
<
i
class
=
"fa fa-lock"
></
i
>
</
span
>
<
label
for
=
"password2"
class
=
"sr-only"
>
Confirm Password
</
label
>
<
input
type
=
"password"
class
=
"form-control"
id
=
"password2"
placeholder
=
"Confirm password"
>
</
div
>
</
div
>
<
div
class
=
"footer"
>
<
button
type
=
"submit"
>Sign Up</
button
>
<
p
>
Already have an account?!
<
a
href
=
"#loginModal"
data-toggle
=
"modal"
data-dismiss
=
"modal"
>
Login!
</
a
>
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
$(document).ready(function() {
/* Centering the modal vertically */
function alignModal() {
var modalDialog = $(this).find(".modal-dialog");
modalDialog.css("margin-top", Math.max(0,
($(window).height() - modalDialog.height()) / 2));
}
$(".modal").on("shown.bs.modal", alignModal);
/* Resizing the modal according the screen size */
$(window).on("resize", function() {
$(".modal:visible").each(alignModal);
});
});
</
script
>
</
body
>
</
html
>