Rails & prototype - insert a div and position it

Question

For my rails site, when somebody attempts to delete an item, I wish to pop up a custom div (as opposed to a javascript alert box) asking for confirmation before doing so.

At the moment, the way that I am doing this, is that clicking on the delete link will call a function (in application_helper.rb) as below:

  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

The rendered partial is intended to appear in the middle of the screen, and the locals are what will be used to create the appropriate delete link in the div.

However, my problem here is attempting to make it appear in the middle of the screen. I've always massively suffered with javascript and this is driving me insane as well. (Ya, I've tried to use firebug as well, but those long lines of javascript mean nothing to me. >.< )

The 2nd line in my update_page block is meant to call a javascript function that center's the inserted div.

The function that I've written and stuck into my application.js file is as follows:

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);
}

What happens when I click, is that the partial div is created, and inserted into the page at the appropriate spot. However it is not being positioned in anyway that I can tell. So, I'm looking for help! What am I doing wrong in the javascript function, or in attempting to call the function?

Thanks in advance!

--edit-- I'm not sure if this will help... This is the relevant CSS code for delete_box.

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

So the CSS doesn't touch the positioning in any way.

Answer 1

There are several prebaked libraries out there that do just what you're saying, might be easier than writing it yourself. Redbox is a rails plugin that works in Prototype, for one example.