How to handle a popup with fixed position's content behind, like Facebook's dialog.

popup.coffee

class Popup
  loaded: =>
    @on 'dates:index', @show

  show: (e) =>
    @scrollTop = document.body.scrollTop
    document.body.appendChild(e.HTML)
    main = document.body.querySelector('main')
    main.classList.add('overlayed')
    main.style.top = "-#{@scrollTop}px"
    document.body.scrollTop = 0
    @on 'keyup', document, @escaped
    @on 'click', document, @clicked

  clicked: (e) =>
    el = e.target
    while el && !el.classList.contains('popup')
      el = el.parentElement

    unless el?
      @remove()

  escaped: (e) =>
    if e.keyCode == 27
      @remove()

  remove: (e) =>
    main = document.body.querySelector('main')
    main.classList.remove('overlayed')
    document.removeEventListener('keyup')
    document.removeEventListener('click')
    popup = document.body.querySelector('.popup')
    return unless popup?

    if popup.parentElement.classList.contains('overlay')
      popup.parentElement.remove()
    else
      popup.remove()

    document.body.scrollTop = @scrollTop
    main.style.top = null
    @scrollTop = null

Ethereal.Models.add Popup, 'Dates.Select'