Как сделать выравнивание всплывающего окна по центру (по оси Y)?

@Enkille · Регистрация: 23.11.2015

Студворк — интернет-сервис помощи студентам

Есть pop-up на jQuery, который открывается по клику. Блок с информацией этого попапа помещен где-то посередине кода страницы, а ссылка, по которой он активируется ещё немного ниже.

Сейчас у него есть свойство position:absolute. Пробовал выравнивать top'ом, margin'ом с разными значениями, но он все-равно появляется не там.

Хочется, чтобы он появлялся всегда по центру страницы, не смотря на его местоположения в коде.

Это возможно?

@mrBobrillo · 01.12.2015, 22:13

Конечно же можно, можно все, но не гадая на картах!
Ссылку выкладывайте а?

или код хотя бы ...

@Enkille · 01.12.2015, 23:27 **[ТС]**

Сообщение от mrBobrillo

Конечно же можно, можно все, но не гадая на картах!
Ссылку выкладывайте а? или код хотя бы ...

Вот. Максимально упростил его. Это блок с содержими попапа. Он находится в середине страницы, а ниже него находятся вызывающие его ссылки, но блок появляется где-то вверху, а не в активной на данный момент области браузера.

Вызывается по классу link1 (и т.д., popup-ов много).

JS тоже нужен?

HTML5
1
2
3
4
5
6
7
8
<div style="position:relative; margin-top:-90px;">
  <div class="front-page-popup link1 photo_win">
  <a class="close" href="#">Закрыть</a>
    <div class="img_wrap">
    Текст для блока, текст для блока... Текст для блока, текст для блока... Текст для блока, текст для блока... Текст для блока, текст для блока... Текст для блока, текст для блока... Текст для блока, текст для блока... Текст для блока, текст для блока... Текст для блока, текст для блока... Текст для блока, текст для блока... 
    </div><!--img-wrap-->
  </div><!--.link1 END -->
</div><!--popup block END-->

@mrBobrillo · 01.12.2015, 23:35

Ну за что вы так издеваетесь то?

Конечно же нужен и css и js.

Могу пока что посоветовать одно, чтоб выровнять модальное окно по середине, то есть по горизонтали, следует сделать следующее:

CSS
1
2
3
4
5
6
7
.class {
position: absolute;
left: 50%;
margin-left: -...; минус на пол ширины вашего модального окна.
top: 50%;
margin-top: -...; минус на пол высоты вашего модального окна.
}

Пробуйте данный способ. Высоту делать по желанию.

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@Enkille 1 / 1 / 0 Регистрация: 23.11.2015 Сообщений: 24

	Как сделать выравнивание всплывающего окна по центру (по оси Y)? 01.12.2015, 20:47. Показов 5221. Ответов 3 Метки нет (Все метки) Есть pop-up на jQuery, который открывается по клику. Блок с информацией этого попапа помещен где-то посередине кода страницы, а ссылка, по которой он активируется ещё немного ниже. Сейчас у него есть свойство position:absolute. Пробовал выравнивать top'ом, margin'ом с разными значениями, но он все-равно появляется не там. Хочется, чтобы он появлялся всегда по центру страницы, не смотря на его местоположения в коде. Это возможно? 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	01.12.2015, 22:13
	Конечно же можно, можно все, но не гадая на картах! Ссылку выкладывайте а? или код хотя бы ... 0