Как выровнять модальное поле содержимого по центру любого экрана?

Опубликовано: 5 Января, 2022

Плагин Bootstrap Modal - это диалоговое / всплывающее окно, которое отображается поверх текущей страницы. По умолчанию модальное окно Bootstrap выравнивается по верхней части страницы с некоторым полем. Но вы можете выровнять его по середине страницы по вертикали, используя свойство CSS vertical-align . Мы также можем использовать JavaScript для центрирования модального
Примеры ниже иллюстрируют подход:

Пример 1. Сначала мы разработаем модальный контент для регистрации, а затем с помощью CSS выровняем это модальное окно по центру (по вертикали). Используя свойство vertical-align, свойство vertical-align устанавливает вертикальное выравнивание элемента.

<!DOCTYPE html>
< html >
< head >
< title >Bootstrap Modal Alignment</ title >
< link rel = "stylesheet" href =
" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " />
< link rel = "stylesheet" href =
" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css "
integrity =
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin = "anonymous" >
< script src =
" https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " >
</ script >
< script src =
" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " >
</ script >
< style >
/* Text alignment for body */
body {
text-align: center;
}
/* Styling h1 tag */
h1 {
color: green;
text-align: center;
}
/* Styling modal */
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.modal-dialog {
display: inline-block;
vertical-align: middle;
}
.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" >
<!-- Modal root -->
< div class = "m-header" >
< button class = "close" data-dismiss = "modal" >
×
</ button >
< h2 class = "myModalLabel" > Sign Up </ h2 >
</ div >
<!-- Modal body -->
< div class = "inputs" >
<!-- username input -->
< 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 >
<!-- Email input -->
< 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 >
<!-- Password -->
< 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 >
<!-- Confirm Password -->
< 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 >
<!-- Modal footer -->
< 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 >
</ body >
</ html >

Выход :

Пример 2: Аналогичным образом мы сначала создаем модальный контент для регистрации, а затем вместо CSS мы будем использовать JavaScript для центрирования модального окна (по вертикали). Мы будем использовать CSS только для проектирования. В этом примере сначала используйте метод find (), чтобы найти модальный диалог. Затем вычтите модальную высоту из высоты окна, разделите ее пополам и разместите модальное окно, которое будет центрировано (по вертикали). Это решение будет динамически корректировать выравнивание модального окна.

<!DOCTYPE html>
< html >
< head >
< title >Center Align Bootstrap Modal Vertically</ title >
< link rel = "stylesheet" href =
" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " />
< link rel = "stylesheet" href =
" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css "
integrity =
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin = "anonymous" >
< script src =
" https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " >
</ script >
< script src =
" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " >
</ 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" >
<!-- Modal root -->
< div class = "m-header" >
< button class = "close" data-dismiss = "modal" >
×
</ button >
< h2 class = "myModalLabel" >Sign Up</ h2 >
</ div >
<!-- Modal body -->
< div class = "inputs" >
<!-- username input -->
< 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 >
<!-- Email input -->
< 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 >
<!-- Password -->
< 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 >
<!-- Confirm Password -->
< 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 >
<!-- MOdal footer -->
< div class = "footer"
Technical Scripter Вопросы о Web технологиях Picked HTML CSS-Misc HTML-Misc JavaScript-Misc CSS Bootstrap

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023