helper.rb

  
  # fully resizable. just make sure you have it inside a relatively position element.
  def modal(options = {}, &block)
    options.merge!({:class => [options[:class], "modal clearfix"].join(' ')})
    render :layout => '/shared/modal', :locals => {:options => options}, &block
  end

modal.css

.modal {
  padding:0;
  position:absolute;
  display:none;
  z-index:100;
  background:none;
  .modal_tl{background:transparent url('/images/design/modal/tl.png') top left no-repeat;}
  .modal_tr{background:transparent url('/images/design/modal/tr.png') top right no-repeat;}
  .modal_br{background:transparent url('/images/design/modal/br.png') bottom right no-repeat;}
  .modal_bl{background:transparent url('/images/design/modal/bl.png') bottom left no-repeat;padding:28px;}
  .modal_t {background:transparent url('/images/design/modal/t.png') top left repeat-x;margin-top:-28px;}
  .modal_b {background:transparent url('/images/design/modal/b.png') bottom left repeat-x;margin-bottom:-28px;padding:28px 0;}
  .modal_l {background:transparent url('/images/design/modal/l.png') top left repeat-y;margin-left:-28px;}
  .modal_r {background:transparent url('/images/design/modal/r.png') top right repeat-y;margin-right:-28px;padding:0 28px;}
  .modal_content{
    padding:10px;
    background:transparent url('/images/design/modal/c.png') top left repeat;
    min-width:200px;
    min-height:100px;
    position:relative;
  } 
  .close_icon {position:absolute;right:2px;top:0;}
}

.simple_modal {
  position: fixed;
/*  margin: 15% auto;*/
/*  max-width: 70%;*/
  z-index: 21;
  .close_icon {
    z-index: 22;
    position: absolute; 
    right: 2px;
    background: url(/images/design/close_button_blue.png) center no-repeat;
    height: 18px;
    width: 18px;
  }
  @include styled_text;
  textarea {@include styled_text;}
}

modal.haml

- options ||= {}
- options.merge!({:class => [options[:class], "modal clearfix"].join(' ')})
= content_tag(:div, options) do
  .modal_tl
    .modal_tr
      .modal_br
        .modal_bl
          .modal_t
            .modal_b
              .modal_l
                .modal_r
                  .modal_content
                    = yield
                    %a.close_icon= t('template.close', false)

modal.js

ss.register('modal', (function(){
  var positionModal = function(modal){
    var parent = modal.parent()[0].tagName == 'BODY' ? $(window) : $(modal.parent());
    modal.css({
      top: Math.max((parent.height() - modal.height()) / 2, 0),
      left: (parent.width() - modal.width()) / 2
    });
  };
		
  return {
    showModal: function(selector, washout, skip_positioning){
      var modal = $(selector);
      if(washout && ($('#washout').length == 0)) modal.before('<div id="washout" />')
      modal.find('.close_icon').click(function(){ss.modal.hideModal(selector); return false});
      modal.show();
      if(!skip_positioning) positionModal(modal);
      $.events.send('modal_shown', {selector: selector});
      return modal;
    },
    hideModal: function(selector){
      var modal = $(selector);
      if($('#washout + ' + selector).length != 0) $('#washout').remove();
      modal.hide();
      $.events.send('modal_hidden', {selector : selector});
    }
  }    
}()));
  

simple_modal.haml

= content_tag :div, options.merge({:class => 'simple_modal'}, &lambda{|k,a,b| [a,b].join(' ')}) do
  %a.close_icon(href="#")
  = simple_section do
    = yield

usage.js

ss.modal.showModal('#flag_modal', true, true);

ss.modal.hideModal('#flag_modal');