铁轨和原型 - 插入一个 div 并定位它

Question

对于我的 Rails 站点，当有人尝试删除某个项目时，我希望弹出一个自定义 div（而不是 JavaScript 警报框），要求在执行此操作之前进行确认。

目前，我执行此操作的方式是，单击删除链接将调用一个函数（在 application_helper.rb 中），如下所示：

  def show_delete_box(object, name)
    update_page do |page|
      page.insert_html :before, "content", render(:partial => "shared/generic_delete_box", :locals => { :object => object, :name => name })
      page << "$('delete_box').Center"
    end
  end

渲染的部分旨在出现在屏幕和局部变量将用于在 div 中创建适当的删除链接。

然而，我的问题是试图让它出现在屏幕中间。我一直深受 JavaScript 的困扰，这也让我发疯。 （是的，我也尝试过使用 firebug，但是那些长长的 javascript 行对我来说毫无意义。>.<）

我的 update_page 块中的第二行旨在调用 javascript以插入的 div 为中心的函数。

我编写并粘贴到 application.js 文件中的函数如下：

Element.Center = function(element) {
    var vH, vW, eH, eW;
    var d = Element.getDimensions(element);
    eH = d.height;
    eW = d.width;
    vH = document.viewport.getHeight();
    vW = document.viewport.getWidth();

    var y = (vH/2) - (eH/2) + "px";
    var x = (vW/2) - (eW/2) + "px";
    var style = { position: 'absolute'; top: y + 'px'; left: x + 'px'};

    element.setStyle(style);
}

当我单击时，会创建部分 div，并将其插入到页面的适当位置。然而，据我所知，它并没有以任何方式定位。 所以，我正在寻求帮助！我在 javascript 函数中或尝试调用该函数时做错了什么？

提前致谢！

- 编辑 - 我不确定这是否有帮助...这是 delete_box 的相关 CSS 代码。

#delete_box {
    background-color: green;
    border: 5px solid #999;
    padding: 15px;
    width: 600px;
}

所以 CSS 不会以任何方式影响定位。

Answer 1

有几个预制的库可以完成您所说的操作，可能比您自己编写更容易。例如，Redbox 是一款在 Prototype 中工作的 Rails 插件。