jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

ポップアップ表示

注意
これらの記事は2016年当時の物で結構古いです。モダンブラウザでは不要な記述やJavaScriptでなくともCSSで実現できる機能もあります。 当時の記録として残してありますがあまり参考になるものではありません。
概要
画像クリックで大きな画像をポップアップ表示します。
また、画像やその他要素クリックで非表示エリアをポップアップします。
実装例はトップページに設置してあります。
使用方法
JavaScript内のコメント参照ください。
備考
実装するたびにちょこちょこ変更しています。

/**
 * flyout
 *
 * usage:
 * <img src="image/aaa01.gif" class="flyout" alt="text">
 * aaa01large.jpg という large を付加したファイルもセットで用意する事。
 * 最後の.(ドット)の前に large を付加する。
 *
 * usage:
 * <img src="image/aaa01.gif" class="flyout" data-flyout-object="objid" alt="text">
 * <div id="objid" style="display:none;">aaaa</div>
 *
 * @author ao-system
 */
(function(window,document){
	var openSpeed = 1000;	//調整可能
	var closeSpeed = 400;	//調整可能
	var zIndexVar = 10;		//調整可能
	var shown = false;	//work
	var animating = false;	//work
	var nowLoading = false;	//work
	var thumbElm;	//work
	var wrapElm;	//work
	var largeElm;	//work
	var headerText;	//work
	var footerText;	//work
	var largeAdjustWidth;	//work
	var largeAdjustHeight;	//work
	init();

/**
 * common
 *
 */
	function addEvt(elm, tpe, func) {
		if (elm.addEventListener) {
			return elm.addEventListener(tpe, func, false);
		} else if (elm.attachEvent) {
			return elm.attachEvent('on' + tpe, func);
		} else {
			return elm['on' + tpe] = func;
		}
	}
	function scrolltop() {
		var bdy = document.body;
	    var d = document.documentElement;
	    if (bdy && bdy.scrollTop) {
			return bdy.scrollTop;
		}
	    if (d && d.scrollTop) {
			return d.scrollTop;
		}
	    if (window.pageYOffset) {
			return window.pageYOffset;
		}
	    return 0;
	}
	function cumulativeOffset(elm) {
		var ofsTop = 0;
		var ofsLeft = 0;
		do {
			ofsTop  += elm.offsetTop  || 0;
			ofsLeft += elm.offsetLeft || 0;
			elm = elm.offsetParent;
		} while (elm);
		return {
			ofsTop: ofsTop
			,ofsLeft: ofsLeft
		}
	}

/**
 * start
 *
 */
	function init() {
		var imgs = document.getElementsByTagName('img');
		for (var i = 0; i < imgs.length; i++) {
			if (imgs[i].getAttribute('class')) {
				var classes = imgs[i].getAttribute('class').split(' ');
				for (var j = 0; j < classes.length; j++) {
					if (classes[j] == 'flyout') {
						(function(elm){
							addEvt(elm,'click',function(){clickImg(elm);});	//サムネイルをクリック
							elm.style.cursor = 'pointer';
						})(imgs[i]);
					}
				}
			}
		}
	}
	function clickImg(elm) {
		if (animating == true) {
			return;
		}
		if (shown) {
			putAway(elm);
		} else {
			if (elm.getAttribute('data-flyout-object')) {
				flyOutObject(elm);
			} else {
				flyOutImage(elm);
			}
		}
	}
	function loading(flag) {
		if (nowLoading == false) {
			thumbElm.style.opacity = '';
			return;
		}
		if (flag) {
			thumbElm.style.opacity = '';
			setTimeout(function(){loading(false);},250);
		} else {
			thumbElm.style.opacity = '0.5';
			setTimeout(function(){loading(true);},250);
		}
	}

/**
 * flyOut Large Image
 *
 */
	function flyOutImage(elm) {
		animating = true;
		shown = true;
		thumbElm = elm;
		wrapElm = document.createElement('div');
		wrapElm.style.position = 'absolute';
		//wrapElm.style.left = thumbElm.offsetLeft + 'px';
		//wrapElm.style.top = thumbElm.offsetTop + 'px';
		var ofs = cumulativeOffset(thumbElm);
		wrapElm.style.left = ofs.ofsLeft + 'px';
		wrapElm.style.top = ofs.ofsTop + 'px';
		wrapElm.style.backgroundColor = '#222';
		wrapElm.style.boxShadow = '0px 0px 20px rgba(255,255,255,0.4)';
		wrapElm.style.cursor = '';
		largeElm = new Image();
		largeElm.onload = function(){
			nowLoading = false;
			loadLargeImage();
		};
		largeElm.src = getLargeName(thumbElm.src);
		nowLoading = true;
		loading(false);
	}
	function getLargeName(src) {
		var srcs = src.split('.');
		var result = '';
		for (var i = 0; i < srcs.length; i++) {
			if (i + 2 == srcs.length) {
				result += srcs[i] + 'large.' + srcs[i + 1];
				break;
			}
			result += srcs[i] + '.';
		}
		return result;
	}
	function loadLargeImage() {
		largeElm.style.width = thumbElm.width + 'px';
		largeElm.style.height = thumbElm.height + 'px';
		largeElm.style.margin = '0px';
		wrapElm.style.zIndex = zIndexVar;
		wrapElm.style.width = thumbElm.width + 'px';
		wrapElm.style.height = thumbElm.height + 'px';
		wrapElm.style.transition = 'all ' + (openSpeed / 1000) + 's';
		largeElm.style.transition = 'all ' + (openSpeed / 1000) + 's';
		wrapElm.style.opacity = '0.0';
		wrapElm.appendChild(largeElm);
		document.body.appendChild(wrapElm);
		setTimeout(function(){loadLargeImageAnimate();},50);
		setTimeout(function(){
			if (thumbElm.getAttribute('alt')) {
				altText(thumbElm.getAttribute('alt'));
			}
			closeText();
			wrapElm.style.cursor = 'pointer';
			animating = false;
		},openSpeed);
	}
	function loadLargeImageAnimate() {
		largeAdjustWidth = largeElm.naturalWidth;
		largeAdjustHeight = largeElm.naturalHeight;
		if (largeAdjustWidth > (window.innerWidth - 80 - 20)) {
			largeAdjustWidth = window.innerWidth - 80 - 20;
			largeAdjustHeight = Math.floor((window.innerWidth - 80 - 20) * largeElm.naturalHeight / largeElm.naturalWidth);
		}
		if (largeAdjustHeight > (window.innerHeight - 80 - 20)) {
			largeAdjustHeight = window.innerHeight - 80 - 20;
			largeAdjustWidth = Math.floor((window.innerHeight - 80 - 20) * largeElm.naturalWidth / largeElm.naturalHeight);
		}
		largeElm.style.width = largeAdjustWidth + 'px';
		largeElm.style.height = largeAdjustHeight + 'px';
		largeElm.style.margin = '40px';
		wrapElm.style.width = (largeAdjustWidth + 80) + 'px';
		wrapElm.style.height = (largeAdjustHeight + 80) + 'px';
		wrapElm.style.left = Math.floor((window.innerWidth - largeAdjustWidth) / 2 - 40) + 'px';
		wrapElm.style.top = Math.floor(((window.innerHeight - largeAdjustHeight) / 2 - 40) + scrolltop()) + 'px';
		wrapElm.style.opacity = '1.0';
		addEvt(wrapElm,'click',function(){clickImg(largeElm);});	//開いている大きな画像をクリック
	}

/**
 * flyOut Object
 *
 */
	function flyOutObject(elm) {
		animating = true;
		shown = true;
		thumbElm = elm;
		wrapElm = document.createElement('div');
		wrapElm.style.position = 'absolute';
		//wrapElm.style.left = thumbElm.offsetLeft + 'px';
		//wrapElm.style.top = thumbElm.offsetTop + 'px';
		var ofs = cumulativeOffset(thumbElm);
		wrapElm.style.left = ofs.ofsLeft + 'px';
		wrapElm.style.top = ofs.ofsTop + 'px';
		wrapElm.style.backgroundColor = '#222';
		wrapElm.style.boxShadow = '0px 0px 20px rgba(255,255,255,0.4)';
		wrapElm.style.cursor = '';
		wrapElm.style.zIndex = zIndexVar;
		largeElm = document.createElement('div');
		largeElm.style.display = 'inline-block';
		largeElm.innerHTML = document.getElementById(elm.getAttribute('data-flyout-object')).innerHTML;
		loadObject();
		nowLoading = false;
		loading(false);
	}
	function loadObject() {
		document.body.appendChild(largeElm);
		largeAdjustWidth = largeElm.offsetWidth;	//実際の大きさ
		largeAdjustHeight = largeElm.offsetHeight;	//実際の大きさ
		document.body.removeChild(largeElm);
		largeElm.style.width = thumbElm.width + 'px';
		largeElm.style.height = thumbElm.height + 'px';
		largeElm.style.margin = '0px';
		wrapElm.style.width = thumbElm.width + 'px';
		wrapElm.style.height = thumbElm.height + 'px';
		wrapElm.style.transition = 'all ' + (openSpeed / 1000) + 's';
		largeElm.style.transition = 'all ' + (openSpeed / 1000) + 's';
		wrapElm.style.opacity = '0.0';
		wrapElm.style.overflow = 'hidden';
		wrapElm.appendChild(largeElm);
		document.body.appendChild(wrapElm);
		setTimeout(function(){loadObjectAnimate();},50);
		setTimeout(function(){
			if (thumbElm.getAttribute('alt')) {
				altText(thumbElm.getAttribute('alt'));
			}
			closeText();
			footerText.style.cursor = 'pointer';
			animating = false;
			addEvt(footerText,'click',function(){clickImg(largeElm);});	//CLOSEをクリック
		},openSpeed);
	}
	function loadObjectAnimate() {
		largeElm.style.width = largeAdjustWidth + 'px';
		largeElm.style.height = largeAdjustHeight + 'px';
		largeElm.style.margin = '40px';
		wrapElm.style.width = (largeAdjustWidth + 80) + 'px';
		wrapElm.style.height = (largeAdjustHeight + 80) + 'px';
		wrapElm.style.left = Math.floor((window.innerWidth - largeAdjustWidth) / 2 - 40) + 'px';
		wrapElm.style.top = Math.floor(((window.innerHeight - largeAdjustHeight) / 2 - 40) + scrolltop()) + 'px';
		wrapElm.style.opacity = '1.0';
	}

/**
 * open後
 *
 */
	function altText(str) {
		headerText = document.createElement('div');
		headerText.innerHTML = str;
		headerText.style.position = 'absolute';
		headerText.style.width = (largeAdjustWidth + 80) + 'px';
		headerText.style.height = '20px';
		headerText.style.textAlign = 'center';
		headerText.style.top = '8px';
		headerText.style.color = '#fff';
		headerText.style.fontSize = '16px';
		headerText.style.overflow = 'hidden';
		wrapElm.appendChild(headerText);
	}
	function closeText() {
		footerText = document.createElement('div');
		footerText.innerHTML = 'CLOSE';
		footerText.style.position = 'absolute';
		footerText.style.width = (largeAdjustWidth + 80) + 'px';
		footerText.style.textAlign = 'center';
		footerText.style.top = (largeAdjustHeight + 49) + 'px';
		footerText.style.color = '#888';
		footerText.style.fontSize = '16px';
		wrapElm.appendChild(footerText);
	}
	function putAway(nextElm) {
		if (animating == true || shown == false) {
			return;
		}
		if (shown) {
			animating = true;
			setTimeout(function(){
				wrapElm.style.transition = 'all ' + (closeSpeed / 1000) + 's';
				largeElm.style.transition = 'all ' + (closeSpeed / 1000) + 's';
				largeElm.style.width = thumbElm.width + 'px';
				largeElm.style.height = thumbElm.height + 'px';
				largeElm.style.margin = '0px';
				wrapElm.style.width = thumbElm.width + 'px';
				wrapElm.style.height = thumbElm.height + 'px';
				//wrapElm.style.left = thumbElm.offsetLeft + 'px';
				//wrapElm.style.top = thumbElm.offsetTop + 'px';
				var ofs = cumulativeOffset(thumbElm);
				wrapElm.style.left = ofs.ofsLeft + 'px';
				wrapElm.style.top = ofs.ofsTop + 'px';
				wrapElm.style.opacity = '0.1';
				if (headerText) {
					wrapElm.removeChild(headerText);
				}
				wrapElm.removeChild(footerText);
			},50);
			setTimeout(function(){
				document.body.removeChild(wrapElm);
				animating = false;
				shown = false;
				if (nextElm != largeElm) {	//大きな画像をクリックした場合はfalse
					if (nextElm != thumbElm) {	//直前のサムネイル画像をクリックした場合はfalse
						clickImg(nextElm);
					}
				}
			},closeSpeed);
		}
	}
})(window,document);