JavaScript Alert Dialog is ugly

Rails uses JavaScript alert by default for confirmations, and developers love using alert() because it is easy. Downside? I think it feels cheap. There are tons of solution out there, jQuery UI, ColorBox. In case you are using Twitter’s Bootstrap (isn’t it the best thing ever?), it’s pretty easy to replace using native JavaScript alert dialog with Twitter modal dialog.

Here is how I replace the alert() function using CoffeeScript:

# Public: Shows a modal dialog in replacement of JavaScript alert.
#
# title - Title on the dialog (required).
# message - Message on the dialog (required).
# label - Label for the dismiss button (optional).
#
# Returns jQuery Object for the modal dialog.
#
YourApplication.alert = (title, message, label) ->
  $alert = $('#application_alert')
  if $alert.length == 0
    html =  """
            <div class="modal hide fade" id="application_alert">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3></h3>
              </div>
              <div class="modal-body">
                <p></p>
              </div>
              <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal"></a>
              </div>
            </div>
            """
    $alert = $(html).appendTo($('body'))
  $('h3', $alert).text(title)
  $('p', $alert).text(message)
  $('a', $alert).text(label || 'Close')
  $alert.modal('show')

So instead of calling alert(…), you can call YourApplication.alert(…).

Next thing is I want to replace JavaScript confirm with Bootstrap modal dialog:

# Extends Rails JavaScript to use modal dialog for confirm.
$.rails.allowAction = (element) ->
  message = element.data('confirm')
  title = element.data('confirm-title') || 'Are you sure?'
  ok = element.data('confirm-ok') || 'OK'
  # If there's no message, there's no data-confirm attribute,
  # which means there's nothing to confirm
  return true unless message
  $('#confirmModal').remove()
  # Clone the clicked element (probably a delete link) so we can use it in the dialog box.
  $link = element.clone()
    # We don't necessarily want the same styling as the original link/button.
    .removeAttr('class')
    # We don't want to pop up another confirmation (recursion)
    .removeAttr('data-confirm')
    # We want a button
    .addClass('btn').addClass('btn-danger')
    # We want it to sound confirmy
    .html(ok)

  # Create the modal box with the message
  modal_html = """
               <div class="modal fade" id="confirmModal">
                 <div class="modal-header">
                   <a class="close" data-dismiss="modal">×</a>
                   <h3>#{title}</h3>
                 </div>
                 <div class="modal-body">
                   <p>#{message}</p>
                 </div>
                 <div class="modal-footer">
                   <a data-dismiss="modal" class="btn">Cancel</a>
                 </div>
               </div>
               """
  $modal_html = $(modal_html)
  # Add the new button to the modal box
  $modal_html.find('.modal-footer').append($link)
  # Pop it up
  $modal_html.modal()
  # Prevent the original link from working
  return false

So now you can use the following in your erb file:

 <%= link_to "Jump", @jump,
      :confirm => "Are you sure you want to jump off the cliff?",
      :data => { :confirm_title => "Think Twice" , :confirm_ok => "Jump" } %>

I hope this helps.