Open modalhref="#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);
}
投稿
