Question

我为javascript automated validation script生成一个div。它由以下代码生成：

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

现在我如何以水平和垂直方式编程中心div？

注意：目前我正在显示一个警告框但是一旦我知道如何将div居中，我会的用这个动态生成的div替换alertbox，这也会提供一些类似灯箱的效果。

由于

注意：作为参考，您可以下载此脚本的最新版本here。

请注意，我不想使用外部css，因为这是验证脚本，它应该能够以编程方式执行。例如：使用这样的东西可能会有所帮助：

 alertbox.style.position: whatever
 ....

Answer 1

应用与静态内容相同的CSS规则。可以按照this article中的描述实现水平居中 - 基本上你给div固定，并将左右边距设置为auto。垂直居中有点棘手 - 讨论了一些方法here并在此this blog post中详述。

最整洁的方法可能是定义一个负责居中的CSS类，然后将该类应用于动态生成的元素，如下所示：

alertbox.className = "myCssClass";

<强>更新由于你已经在使用JavaScript来创建div，你当然可以将它用于居中（与CSS绝对定位相结合） - 这实际上可能是一个更清晰的解决方案（由于CSS垂直居中的黑客）。具体如何你这样做取决于你正在使用什么工具 - 使用原型或jQuery等JS框架比用“原始”JavaScript更容易实现，因为浏览器处理窗口/浏览器高度有点不同。

Answer 2

如果您使用的是jQuery，为什么不使用validation plugin？

您应该能够将其与模态窗口（例如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>

如何将动态生成的div居中？

3 个答案: