A simple modal.

modal.haml

%body
    #js-attach-wrap
    #modal-container
      .modal-background
      .modal

modal.scss

//Modal Globals
#modal-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1000;
  display: none;
  .modal-background {
    position: absolute;
    top: 0; left: 0;
    z-index: 1010;
    background: rgba(#2a303c, 0.70);
  }
  .modal {
    position: fixed;
    top: 40%; left: 50%;
    background: #fff;
    z-index: 1020;
    padding: 0;
    border-radius: 5px;
    @include box-shadow(0 5px 5px rgba(#000, 0.11));
  }
}

ModalSetup.coffee

class Readit.ModalRegionStruct extends Backbone.Marionette.Region
  el: '#modal-container .modal'

  open: (view) ->
    @$el.parents('#modal-container').css
      'width'  : $(window).width()
      'height' : $(window).height()

    @$el.siblings('.modal-background').css
      'width'  : $(document).width()
      'height' : $(document).height()

    @$view = $(view.el)
    @$el.html @$view
    @$el.parents('#modal-container').fadeIn('fast')
    @centerView()

  centerView: ->
    left = -(@$el.outerWidth(false) / 2)
    top  = -(@$el.outerHeight(false) / 2)

    @$el.css
      'marginLeft' : left
      'marginTop'  : top

  close: (view) ->
    @$el.parents('#modal-container').fadeOut('fast')
    delete @$view