
クリックした要素を全画面に広げて、ページ遷移せずに新たな要素を表示する「cta.js」
2015年6月11日jQueryプラグイン活用
「cta.js」はある要素をクリックするとその要素が全画面に広がり、ページを遷移せずに新たな要素を全画面で表示することができます。
サイトのメニューを表示したり、コンテンツが少ないサイトのアバウトページ代わりに使えそうです。
JavaScript
(function($){ $(function() { var closeFn; function closeShowingModal() { var showingModal = document.querySelector('.modal.show'); if (!showingModal) return; showingModal.classList.remove('show'); document.body.classList.remove('disable-mouse'); if (closeFn) { closeFn(); closeFn = null; } } document.addEventListener('click', function (e) { var target = e.target; if (target.dataset.ctaTarget) { closeFn = cta(target, document.querySelector(target.dataset.ctaTarget), { relativeToWindow: true }, function showModal(modal) { modal.classList.add('show'); document.body.classList.add('disable-mouse'); }); } else if (target.classList.contains('modal-close-btn')) { closeShowingModal(); } }); document.addEventListener('keyup', function (e) { if (e.which === 27) { closeShowingModal(); } }) }); })(jQuery);
HTML
<div id="container"><p id="btn" data-cta-target="#area">click</p></div> <div id="area" class="modal"><p id="close" class="modal-close-btn"></p></div>
CSS
#container { text-align: center; } #btn { display: inline-block; border: 1px solid #ffbc30; color: #ffffff; background-color: #ffbc30; padding: 12px 30px; cursor: pointer; transition: .2s linear; } #btn:hover { color: #ffbc30; background-color: #ffffff; } .modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #ffbc30; z-index: 3; visibility: hidden; opacity: 0; pointer-events: none; transition: 200ms ease; } .modal.show { opacity: 1; visibility: visible; pointer-events: auto; } #close { display: inline-block; position: fixed; right: 50px; top: 70px; transition: .2s linear; cursor: pointer; } #close:hover { opacity: .7; } #close:before, #close:after { content: ""; position: absolute; background-color: #ffffff; width: 5px; height: 25px; transform: rotate(45deg); } #close:after { transform: rotate(-45deg); }