ドロワーメニューのように表示されるモーダル

Question

ドロワーメニューのように、右側からスライドインで表示されるモーダルを作っています。
ひとまずモーダルを表示させるところまでは出来たのですが、右側からのスライドインがどうしても上手くいかず…。ご教授いただけると嬉しいです。
画面外にあったものをスライドのアニメーションで表示させるような想定です。

<a class="ModalOpen" data-target="modal-content-01"><img src="/img/.png" alt=""></a>

 <section id="modal-content-01" class="modal-content">
   <a class="ModalClose"><img src="/img/.png" alt="閉じるボタン"></a>
      <p>モーダルの中身</p>
  </section>

.modal-content {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 7%;
    padding-right: 7%;
    z-index: 999;
    overflow: auto;
}

.lock{
    overflow: hidden;
}

.SlideIn {
    display: block;
    right: 0;
}

  $('.ModalOpen').click(function(){
  // bodyを固定（overflow:hiddenにする）
  $('body').addClass('lock');
  // モーダルコンテンツのIDを取得
  var modal = '#' + $(this).attr('data-target');
   // モーダルコンテンツスライドイン
  $(modal).addClass('SlideIn');
  });

  $('.ModalClose').off().click(function(){
    $(modal).removeClass('SlideIn');
    $('body').removeClass('lock');
    //モーダルコンテンツを囲む要素を削除
  });

  //リサイズしたら表示位置を再取得
  $(window).on('resize', function(){
    modalResize();
  });

「.SlideIn」でモーダル要素になる「.modal-content」をスライド表示させるようにしたいと思っています。
モーダルが表示されている際、モーダルの背景の要素を固定するために「.lock」をつけています。
また、デバイス幅100％表示の想定です。

何卒、よろしくお願い致します。

Comments

[kei344]

「うまく動作しません」とはどのような状況でしょうか。出ているエラーおよび再現可能なHTMLと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[miyanoko]

申し訳ございません、質問内容に少し具体的な内容やHTMLを追加しました。

Answer 1

元のソースを何も流用していませんが、参考までに。

サンプル | jsFiddle

.md(モーダル)に、どの位置から始まるかのクラスを設定しておけば、四方どこからでもスライドインできます。斜めからも可能(笑)
モーダルをクリックしたらどう出すかがわかれば、ご自身のソースに当てはめればイケるのではなかろうかと思います。

またこのサンプルでは、モーダル以外をクリックすれば閉じると言うやり方にしてあります。モーダル内で何かしらクリックが行われてもモーダルは閉じません。またモーダル内で右クリックも動作します(コンテキストメニューが開くと言うことです)。

ここらの方法はまた別のやり方もあるかと思うので、まぁどうでも良い部分です(笑)

jQueryやjavascriptでも位置を計算すれば、同じようなことができますが、cssの方が何かと簡単で修正も楽ですから、なるべくcssを利用されるのが良いのではなかろうかと思います。

つまりjQueryで言うと、css()やanimate()を利用せず、addClass(),removeClass()を利用するという感じです。jQueryのcss()は場合によっては色々と使えます。

本来のcssで言うanimationも使えると思います。transitionEndイベントを上手く使えば、.animate()と同じような事もできますし、$.deferredで連続したアニメーションを行うこともできると思います。

Answer 2

動くサンプル：https://jsfiddle.net/6svrnyz8/1/
jsは var modal; の位置の問題がありました。多分これが動かない原因です。デベロッパーツールを使うと、エラーなどが確認できるので開発時には使用したほうがよいです。