.wrapper

  header
    h1 今更ながら、モーダルを作ってみる - 改良版

  main
    .content.content-1
      p 吾輩は猫である。名前はまだ無い。
      p どこで生れたかとんと見当がつかぬ。
      p 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
      a.modal-link(href="javascript:void(0)" data-id="modal-1") モーダル1を開く

    .content.content-2
      p 木曾路はすべて山の中である。
      p あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。
      a.modal-link(href="javascript:void(0)" data-id="modal-2") モーダル2を開く
  
  footer フッター
  
.modal
  #modal-1.modal-inner
    .modal-content
      h2 モーダル1
      figure
        img(src="http://placeimg.com/1000/480/animals")
      p 吾輩はここで始めて人間というものを見た。
      p しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
      p この書生というのは時々我々を捕えて煮て食うという話である。
    a.modal-close(href="javascript:void(0)") 閉じる
  #modal-2.modal-inner
    .modal-content
      h2 モーダル2
      figure
        img(src="http://placeimg.com/1000/480/nature")
      p 一筋の街道はこの深い森林地帯を貫いていた。
      p 東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。
      p 道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。
      p 名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。
      p 新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
      p 道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。
      a.modal-close(href="javascript:void(0)") 閉じる

/* モーダル関連のスタイル*/
body {
  &.modal-open {
    overflow: hidden;
  }
}
.wrapper {
  .modal-open & {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(#000, 0.7);
  .modal-open & {
    display: block;
  }
  &-inner {
    display: none;
    overflow-y: auto;
    position: absolute;
    top: 0;
    height: 100%;
    &#modal-1 {
      justify-content: center;
      align-items: center;
      left: 0;
      width: 100%;
      padding: 0 10px;
      &.active {
        display: flex;
      }
      .modal-content {
        width: 650px;
        background: rgba(#fff, 0.5);
      }
    }
    &#modal-2 {
      right: 0;
      width: 80%;
      background: rgba(#fff, 0.5);
      &.active {
        display: block;
      }
      .modal-content {
        width: 100%;
        min-height: 100%;
      }
    }
  }
  &-content {
    padding: 30px;
    h2 {
      padding: 0 0 10px;
      border-bottom: 1px solid #32a238;
      font-size: 28px;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
    figure {
      img {
        max-width: 100%;
        height: auto;
      }
    }
  }
  &-close {
    overflow: hidden;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    z-index: 10;
    border-radius: 3px;
    background: #fff;
    text-indent: 200%;
    white-space: nowrap;
    box-shadow: 0 0 3px rgba(0,0,0,0.75);
    transition: opacity 0.2s ease-in-out;
    &:hover {
      opacity: 0.7;
    }
    &:before {
      content: 'X';
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #000;
      font-size: 16px;
      font-weight: bold;
      text-indent: 0;
    }
  }
}


/* ここはただの箱のスタイル */
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: "M PLUS Rounded 1c";
  * {
    box-sizing: border-box;
  }
}

figure {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100vh;
  z-index: 5;
}

header,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  background: #32a238;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.075em;
  box-sizing: border-box;
}
header {
  height: 100px;
  h1 {
    font-size: 30px;
  }
}
footer {
  height: 150px;
  margin: auto 0 0;
  font-size: 30px;
  transform: translateY(0) !important;
}

main {
    padding: 50px 10px;
}

.content {
  max-width: 600px;
  margin: 50px auto 0;
  padding: 25px 20px;
  border: 1px solid #32a238;
  color: #32a238;
  &:first-child {
    margin-top: 0;
  }
  > *:first-child {
    margin-top: 0;
  }
  p {
    font-size: 20px;
    line-height: 1.7
  }
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 40px;
    margin: 30px 0 0 auto;
    border-radius: 5px;
    background: #32a238;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    &:hover {
      opacity: 0.7;
    }
  }
}

(function(window, $) {
  'use strict';

  // Set Namespace
  var APP = (window.APP = window.APP || {});

  APP.SetModal = function($elm) {
    var that = this;
    that.$elm = $elm;
    that.$body = $('body');
    that.$wrapper = $('.wrapper');
    that.$target = $('#'+$elm.data('id'));
    that.$content = that.$target.find('.modal-content');
    that.$close = that.$target.find('.modal-close');
    that.targetStyle = that.$target.css('align-items');
    that.OPEN = 'modal-open';
    that.ACTIVE = 'active';
    that.scrollTop = 0;
    
    $elm.on('click', function() {
      that.open();
    });
    that.$close.on('click', function() {
      that.close();
    });
    $(window).on('resize', function() {
      that.checkPos();
    });
    $(document).on('click', function(e) {
      if (!$(e.target).hasClass('modal-link') && that.$body.hasClass(that.OPEN) && that.$target.hasClass(that.ACTIVE) && !$(e.target).closest('#'+$elm.data('id') + ' .modal-content').length) {
        that.close();
      }
    });
  };
  APP.SetModal.prototype = {
    open: function() {
      var that = this;
      that.defWidth = $(window).width();
      that.scrollTop = $(window).scrollTop();
      that.$body.addClass(that.OPEN);
      that.$target.addClass(that.ACTIVE);
      that.checkPos();
      that.$target.animate({scrollTop: 0}, 0); // モーダルを再度開いた場合上部に戻す
      that.$wrapper.css({ // 元の画面を
        'top': -(that.scrollTop),
        'padding-right': $(window).width() - that.defWidth + 'px'
      });
    },
    close: function() {
      var that = this;
      that.$body.removeClass(that.OPEN);
      that.$target.removeClass(that.ACTIVE);
      that.$wrapper.css({
        'top': 0,
        'padding-right': 0
      });
      $('html, body').prop({
        scrollTop: that.scrollTop
      });
    },
    checkPos: function() {
      var that = this;
      if (that.$body.hasClass(that.OPEN) && that.targetStyle === 'center') {
        if (that.$content.outerHeight() > $(window).height()) {
          that.$target.css({
            'align-items': 'flex-start'
          })
        } else {
          that.$target.css({
            'align-items': 'center'
          })        
        }
      }     
    }
  };

  $(function() {
    $('.modal-link').each(function() {
      new APP.SetModal($(this));
    });
  });

})(window, jQuery);