modal（jQuery でモーダル表示）

概要

弊社で標準プラグインとして設置するjQueryプラグイン（独自）「oo_lib.js」。

その中の「modal」を紹介します。

※ jQueryプラグインは、1プラグイン、1ファイルを推奨とされていますが弊社では、管理のため複数プラグインを含めています。

機能

いわゆるモーダルです。

プラグインコード

jQuery.fn.modal = function (config) {
	let opt = jQuery.extend(
		{
			overlay: '#modal_overlay',
			modal: '#modal',
			closeBtn: '.modal_close, .modal_bg,[data-role=modal_close]',
			detach: true
		},
		config
	);
	const $overlay = $(opt.overlay),
		$modal = $(opt.modal, $overlay);
	let $target, winScrollTop;

	$(this).each(function () {
		$(this).on('click', function () {
			winScrollTop = $(window).scrollTop();
			if (opt.detach) {
				$target = $('#' + $(this).data('target'));
				$target.clone().appendTo($modal);
			}
			$overlay.fadeIn();
			return false;
		});
	});
	$(document).on('click', opt.closeBtn, function () {
		if (opt.detach) {
			$modal.children().detach();
		}
		$overlay.fadeOut();
		$('body,html').stop().animate({ scrollTop: winScrollTop }, 100);
		return false;
	});
	return this;
};

使い方

js

$('.modal_handle').modal();

html

<a class="modal_handle" data-target="modal_target_01">モーダル</a>
<div id="modal_target_01" class="modal_target">
	<h4>モーダル表示コンテンツ</h4>
	<p>TEXTTEXTTEXT</p>
</div>

// 以下、適当なところに

<div id="modal_overlay" class="modal_overlay">
	<div class="modal_bg"></div>
	<div class="modal_wrap">
		<div id="modal" class="modal">
		</div>
		<p class="modal_close"></p>
	</div>
</div>

sass

.modal_handle {
	cursor: pointer;
}

.contents .modal_target {
	display: none;
}

.modal_overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
	width: 100vw;
	height: 100vh;
	.modal_bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		// edit--
		background-color: rgba(black, 0.7);
		// --edit
	}
	.modal_wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		padding: 0;
		// edit--
		background-color: white;
		// --edit
		box-shadow: 0px 1px 10px black;
		transform: translate(-50%, -50%);
		.modal {
			max-width: 90vw;
			max-height: 90vh;
			overflow-y: auto;
			@include mq(_tb) {
				min-width: 90vw;
			}
			> .modal_target {
				display: block;
				padding: 15px;
				@include mq(tb_) {
					padding: 30px;
				}
			}
		}
		.modal_close {
			@include icomoon('self', icom(times), 20px, '', '', white);
			position: absolute;
			top: 0;
			right: 0;
			border-radius: 15px;
			width: 30px;
			height: 30px;
			background-color: black;
			cursor: pointer;
			transform: translate(50%, -50%);
		}
	}
	.modal_wrap.add_prop {
		width: calc(100vw - 30px);
		height: calc(100vh - 30px);
		@include mq(tb_) {
			width: calc(100vw - 30px);
			max-width: 800px;
			height: calc(100vh - 30px);
			max-height: 800px;
		}
	}
}