iOSでモーダルウィンドウが閉じなくて困った話。

閉じない。

困りました。

こないだ作ったポートフォリオサイトの表示をiPhone実機で確認したところ、スライドショーのモーダル部分が、表示はできるものの閉じる事ができなくなっていました。最悪です。

f:id:sanjukyu:20161109165106j:plain:w200

半透明の部分をタップして閉じるよう作っていましたが、
ここからどうすることもできないので涙目になりながら色々ぐぐった結果、こちらの記事を参考に解決できたので書き残しておきます。

どうして閉じてくれないのか。

佐久本のモーダル開閉の動作は色々省略してますが下記のように記述していて、閉じる動作のとこのセレクタがdocumentになってるのがどうやら良くなかったみたいです。

html
...

<!-- slide -->
<div class="gallery-wrapper">
  <ul class="slide-list">
    <li class="slide-list-item clearfix">
      <div class="slide-list-container">
        <a href="img/album/purple.JPG" class="slide-modal-link"><img class="gallery-list-img" src="img/album/purple_thumbnail.png" alt=""></a>
      </div>
    </li>
  </ul>
  <!-- ここにモーダル表示用要素が入るようにする -->
</div>
...

jQuery

  // slide
  $('.slide-modal-link').on('click', function() {
    $(this).blur(); //ボタンからフォーカスを外す
    if ($('#slide-modal-overlay')[0]) return false; //もしオーバーレイが表示されていたら非表示にする。

    var imgLink = $(this).attr('href'); //モーダルに表示する画像情報
    var modalHtml = '<div id="slide-modal-overlay"></div><img id="slide-modal-img" src="' + imgLink + '" alt="">';  //モーダルを表示するための要素

    //モーダルを追加して表示
    $('.slide-contents').append(modalHtml);
    return false;
  });

  //モーダルを削除して非表示に
  $('document').on('click', '#slide-modal-overlay', function() {
    $('#slide-modal-overlay, #slide-modal-img').fadeOut(function() {
      $('#slide-modal-overlay, #slide-modal-img').remove();
    });
  });
  $('#slide-modal-overlay').off('click', '#slide-modal-overlay');

イベントを登録した後に、動的に追加された要素(佐久本の場合#slide-modal-overlay)をイベント発動の対象としたい状況なので、documentをセレクタにしていました。
その他動いてくれてるclickイベントは、発生させたい要素をそのままセレクタとしていたので「spで動かない！なんでや！」とはならなかったわけです。
なるほどでした。

直すぞ。

というわけで、今回はdocument以外の要素でイベントの登録をして解決することにしました。

直したとこも少しで済みました。よかったですね。

jQuery

  //モーダルを削除して非表示に
  $('gallery-wrapper').on('click', '#slide-modal-overlay', function() {
    $('#slide-modal-overlay, #slide-modal-img').fadeOut(function() {
      $('#slide-modal-overlay, #slide-modal-img').remove();
    });
  });
  $('#slide-modal-overlay').off('click', '#slide-modal-overlay');

もう一つ、参考記事にあった、イベントを発生させたい要素にcursor: pointer;とスタイルを当ててあげる方法があって、こちらも試してみたらうまくいきました。すごい。

解決できました。

わけもわからず、『aタグじゃないからクリックできない要素だと思われててダメなのか...?』とか最初思ってて、aタグにしても解決はするようなんですけど、記事の中にあった、マウスカーソルと違ってタップする指じゃでかすぎて厳密な位置の判断しにくいから、aタグとか、clickイベントが登録されている要素とか、cursor: pointer;になってる要素はspでクリックできるようにしとこ！ってことなんじゃないか説には納得がいきました。
だからといってdocumentとかbodyにclickイベントが登録されちゃった時、全部タップ対象にしちゃうと脱出ゲームの逆バージョンみたいになって意味ないから、documentとかbodyは認識されないんじゃないかってのも合わせて納得です。

ぐぐり力とか、原因を突き止める能力みたいなのつけていきたい感じです。

おわり。