クリックした要素を全画面に広げて、ページ遷移せずに新たな要素を表示する「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);
}