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.

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.

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.