Как центрировать div, генерируемый динамически?

Question

Я генерирую div для моего сценария автоматической проверки JavaScript . Он генерируется с кодом ниже:

var alertbox = document.createElement("div");

Теперь, как мне центрировать это деление программно по горизонтали и вертикали?

Примечание: в настоящее время я показываю окно с предупреждением, но как только я знаю, как центрировать div, я буду замените окно оповещения на этот динамически генерируемый div, который также обеспечит эффект лайтбокса.

Спасибо

Примечание. Для справки вы можете скачать последнюю версию этого скрипта здесь .

Обратите внимание, что я не хочу использовать внешние CSS для этого, потому что это сценарий проверки, и он должен иметь возможность делать это программно. Например: может быть полезно использовать что-то вроде этого:

 alertbox.style.position: whatever
 ....

Answer 1

Это вопрос применения тех же правил CSS, что и при работе со статическим контентом. Горизонтальное центрирование может быть достигнуто, как описано в этой статье - в основном вы задаете div с фиксированным значением и устанавливаете левое и правое поля равными auto. Вертикальное центрирование немного сложнее - несколько подходов обсуждаются здесь и подробно рассматриваются в этом этом сообщении в блоге .

Самый простой способ - определить класс CSS, который заботится о центрировании, а затем применить этот класс к динамически сгенерированному элементу, например так:

alertbox.className = "myCssClass";

Обновление: Поскольку вы уже используете JavaScript для создания div, вы, конечно, можете использовать его и для центрирования (в сочетании с абсолютным позиционированием CSS) - это, вероятно, будет более чистым решением (из-за хакерства вертикального центрирования CSS) , То, как вы это сделаете, в некоторой степени зависит от того, какие инструменты вы используете. Вероятно, этого гораздо проще достичь с помощью JS-фреймворка, такого как Prototype или jQuery, чем с «необработанным» JavaScript, поскольку браузеры обрабатывают высоты окна / браузера немного по-другому.

Answer 2

Если вы используете jQuery, почему бы не использовать плагин проверки ?

Вы должны иметь возможность комбинировать его с модальным окном (например, SimpleModal ).

Но если вы не хотите менять то, что уже сделали, попробуйте что-то вроде этого:

Я бы просто применил некоторые правила CSS к div, чтобы расположить его (я включил наложение, которое закрывает страницу и помещает окно с предупреждением сверху):

Примечание : причина, по которой div расположен в крайнем левом положении, заключается в том, что вам нужно получить размеры div с содержимым внутри. Скрытый div будет иметь высоту и ширину ноль. Как только размер определен, он вычисляет центр страницы и позиционирует div.

CSS

#overlay {
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 background: #000;
 opacity: 0.8;
 filter: alpha(opacity=80);
 z-index: 100;
}
#alertbox {
 background: #444;
 padding: 10px;
 position: absolute;
 left: -99999px;
 top: 0;
 z-index: 101;
}

Сценарий

function alertBox(alertMsg){
 // Add overlay
 $('<div id="overlay"></div>')
  .hide()
  .appendTo('body')
  .fadeIn('slow');
// Add alert
 $('<div id="alertbox"></div>')
  .html(alertMsg)
  .appendTo('body');
// calculate & position alertbox in center of viewport
 var abx = $('#alertbox');
 var abxTop = ($(window).height() - abx.height())/2;
 var abxLft = ($(window).width() - abx.width())/2;
 abx
  .hide()
  .css({ top: abxTop, left: abxLft })
  .fadeIn('slow');
// add click to hide alertbox & overlay
  $('#overlay, #alertbox').click(function(){
   $('#overlay, #alertbox').fadeOut('slow',function(){
     $('#alertbox').remove();
     $('#overlay').remove();
   });
  })
}

Answer 3

По какой-то причине я не смог отцентрировать DIV, используя margin-right и margin-left. То, что я нашел, работает лучше, это инкапсулировать их в таблицу (это немного грубоватый код, но он работает для меня). И вы можете использовать объект стиля DOM для изменения поля следующим образом:

<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>