0

Всем здравствуйте!

Есть скрипт модального окна, с помощью которого будет открываться любое кол-во окон на странице. Размеры окон будут разные. Помогите, пожалуйста, отцентрировать его по вертикали.

Сам скрипт: http://jsfiddle.net/LADYX/yobehzk1/

Очень буду благодарен за помощь! Спасибо.

0

2 ответа 2

2

Отступ окна от верхнего края должен быть равен половине высоты страницы, минус половина высоты окна

$(div).css("margin-top", ($(overlay).innerHeight()/2-$(div).outerHeight()/2)+"px");
1
0

Проверяйте: если высота окна меньше высоты экрана => выполняйте строчку которую вам написали, иначе ничего не делайте.

На вашем месте я бы использовал готовое решение, что то вроде этого ( http://fancyapps.com/fancybox/ ).

Вот Вам пример: ( http://jsfiddle.net/vjf0ehyL/ ). В одну строчку я накидал вам решение которое корректно работает во всех браузерах включая мобильные и планшеты, а так-же "юзерфрендли": закрывается по ESC, по клику на оверлей, если просто "непаханное" поле настроек и колбеков, которые делают его очень гибким. Почитайте их api, вам понравится!

1
  • >Вот как раз таки в нем я и хочу сделать так, что если окно по высоте меньше экрана, то чтобы оно центрировалось по вертикали, если же окно по вертикали больше экрана, то тогда чтобы окно выводилось по верхнему краю, т.е. чтобы это правило не подключалось. Возможно ли такое сделать? Включите уже думалку :) Вы сейчас уже описали готовое решение вашей задачи, теперь вам остаётся всего ничего, написать тоже самое на JS if ($(overlay).innerHeight() > $(div).outerHeight()) { $(div).css("margin-top", ($(overlay).innerHeight()/2-$(div).outerHeight()/2)+"px"); } 6 мар 2015 в 1:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.