Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера

Урок. Выравниваем любые объекты точно по центру
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).
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: объекты, точно, любые, ПО, центру, Выравниваем, урок.
Просмотров: 221 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: