Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера |
Урок. Выравниваем любые объекты точно по центру
24.06.14, 09:45:28 | |
Когда мне это было нужно в интернете не нашёл ничего 100% работающего. Так вот по этому выкладываю маленький урок. Предположим, что нам надо сделать простое модальное окошко, и выводится оно должно точно по центру, не зависимо от того какого объёма контент там будет. Описываем стиль: Код .nexfon { top:0; left:0; display:none; position:fixed; z-index:1002; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .nexajax { display:none; position:fixed; z-index:1003; } Не забываем что у окна индекс должен быть больше фона. Теперь пишем сам скрипт: Код <span class="nexajax">ajax окно</span><div class="nexfon"></div><a href="javascript://" id="ssulka">Запуск</a> <script> $("#ssulka").click(function(){ // событие происходит по клику на ссылке var MenuWidth = $(".nexajax").width(); // получаем ширину аджакс акна var MenuHeight = $(".nexajax").height(); //получаем высоту аджакс окна var MenuFonWidth = $(".nexfon").width(); //получаем ширину пользовательского окна за счёт фона так как он растягивается на 100% var MenuFonHeight = $(".nexfon").height(); //получаем высоту пользовательского окна $(".nexajax").fadeIn(800); //выводим на экран окно $(".nexfon").fadeIn(800); //выводим на экран фон $(".nexajax").css({ 'top': (MenuFonHeight / 2) - (MenuHeight / 2), 'left': (MenuFonWidth / 2) - (MenuWidth / 2) , 'position': 'fixed' }); // в последней функции проводим расчёты см в описании статьи }); $('.nexfon').click(function(){ //событие происходит по клику на фоне $(".nexajax").fadeOut(800); //убираем аджакс $(".nexfon").fadeOut(800); //убираем фон }); </script> Описываю последнюю функцию: Координаты для всех объектов всегда устанавливаются для одного из уголков объекта. Поэтому чтобы правильно вывести именно по центру экрана, нам надо вычислить не просто центр экрана, а вычислить координаты точки относительно центра, где будет располагаться верхний левый угол окошка. Для этого отнимаем из половины высоты пользовательского окна половину высоты аджакс окна и задаём эти координаты. Из половины ширины пользовательского окна отнимаем половину ширины аджакс окна и так же задаём эти координаты аджакс окошку. Вот и всё, независимо от разности разрешения экранов и контента окна, аджакс всегда будет выводится по центру, в ходе несложных операций. Урок написал и подготовил Nexon (Nexonion). | |
Просмотров: 394 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |