Using RedBox for modal dialogs

September 21, 2006 code 4 min read

When I first saw Lightbox, my first thought (ok, second thought; my first was "This is awesome![](") was: "This would be a great technique for confirmation pages)" I never got around to using lightbox due to it's emphasis on images, but eventually other solutions started showing up, like GreyBox and ThickBox, that allowed you to use other content.

A couple weeks ago, I came across Redbox, a rails plugin based on ThickBox. It is a great little plugin that simply consists of a few Rails helpers and some Javascript.

As I experimented with it, I decided that I really like the feel of using modal dialog boxes for confirmation messages. It is more consistent with the desktop experience, but not as constrained as popups on the desktop.

Redbox Delete

As I was using Redbox, I developed a pattern that works really well. Instead of limiting :destroy requests to POST, I modified them to return a delete confirmation page when called with a GET, then perform the modification when called with a POST.

def destroy
  @payment = Payment.find(params[:id])
  if request.get?
    respond_to do |wants|
      wants.html
      wants.js { render :layout => 'modal' }
    end
  else
    @payment.destroy
    flash[:notice] = "Payment for $#{@payment.amount} has been deleted."
    redirect_to :action => 'index'
  end
end

This creates a little extra code, but it also makes the modal windows degradable. If the client doesn't support JavaScript, or it is disabled, then when they click a destroy link, they will be taken to a separate confirmation page. I've also created a 'modal' layout that can have some formating, or maybe a close link.

The code to create the redbox link looks like:

<%= link_to_remote_redbox 'delete',
    {:url => {:action => 'destroy', :id => payment}, :method => :get},
    :href => url_for(:action => 'destroy', :id => payment) %>

link\_to\_remote\_redbox takes the same parameters as link\_to\_remote, minus the :update parameter that tells where to put the new content. Note the :method => :get. By default, Ajax requests use POST, but I don't want to POST to the destroy action because that will perform the modification. I'm also setting :href, which makes this link degradable.

As I used Redbox more and more for confirmation pages, it occurred to me that this method would also work really well for simple forms. So, with barely any modification—adding respond\_to in the action and replacing link\_to with link\_to\_remote\_redbox—I was able to change these small forms into modal dialogs. Currently, the forms submit a regular request, but I could refactor it a little more and use Ajax to submit the forms and update the page.

Redbox Enroll

Overall, I really like the feel of these modal dialogs. They make the app feel snappier and less daunting. Users don't have to jump all over the app for simple modifications. They spend the majority of their time on one page, the most important page.

This content is open source. Suggest Improvements.

— @bkeepers