[Ratchet] modalをみる

Open modal


  

    
    
Modal
  
  

    
内容
  

href="#myModalexample" と div id="myModalexample" がポイント

/* ========================================================================
 * Ratchet: modals.js v2.0.2
 * http://goratchet.com/components#modals
 * ========================================================================
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 * ======================================================================== */

!(function () {
  'use strict';

/**イベント発生したものが、処理の対象になるか検索する。**/
  var findModals = function (target) {
    var i;
//selecterでelementを検索し、取得
    var modals = document.querySelectorAll('a');

/**
イベント発生したところから、documentに向けて、親に向かって上がっていき、
aタグのリストの中で一致するものを探します。
**/
    for (; target && target !== document; target = target.parentNode) {
      for (i = modals.length; i--;) {
        if (modals[i] === target) {
          return target;
        }
      }
    }
  };

/**表示するモーダルを特定**/
  var getModal = function (event) {
    var modalToggle = findModals(event.target);

    if (modalToggle && modalToggle.hash) {
　 //modalToggle.hashがそのままモーダルのIDとして指定される
      return document.querySelector(modalToggle.hash);
    }
  };


/** touchend イベントにListener登録**/
  window.addEventListener('touchend', function (event) {
    var modal = getModal(event);
    if (modal) {
/**
getModalの時点でcontains('modal')とかの判定もしてよい気もするが、設計上の意味があるかしれないので、留意しておく。
**/
      if (modal && modal.classList.contains('modal')) {
/**
classList.toggleでcssListに'active'がなければ追加、あったら削除する
**/
        modal.classList.toggle('active');
      }
　  //通常事項されるアクションをキャンセルする
　 //この場合ページ遷移
      event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
    }
  });
}());

どうやらactiveの追加、削除だけでmodalの動作を実装している
class="modal"
class="modal active"

/*!
 * =====================================================
 * Ratchet v2.0.2 (http://goratchet.com)
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 *
 * v2.0.2 designed by @connors.
 * =====================================================
 */

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
.modal {
  position: fixed;
  top: 0;
  z-index: 11;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #fff;
  opacity: 0;//←

/* //カンマで区切って２つ指定している(-transition) */
  -webkit-transition: -webkit-transform .25s,       opacity 1ms .25s;
     -moz-transition:    -moz-transform .25s, opacity 1ms .25s;
          transition:         transform .25s, opacity 1ms .25s;

  -webkit-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.modal.active {
  height: 100%;
  opacity: 1; 　//←
  -webkit-transition:  -webkit-transform .25s;
     -moz-transition:    -moz-transform .25s;
          transition:         transform .25s;

  -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}