Tweet

Pocket

magnificPopupで、同ページ内の要素をインラインでモーダル表示する方法です。

html

<a class="modalLink" href="#modalBox">モーダルが開きます</a>

<div id="modalBox">
	モーダルです。
</div>

javascript

$(document).ready(function () {
	$('.modalLink').magnificPopup({
		type: 'inline',
		preloader: false
	});
});

scss

.mfp-container{
	.modalBox {
		display: block;
	}
}

.modalBox {
	display: none;
	hight :200px;
	width: 300px;
	line-height: 200px;
	margin: 0 auto;
	background-color: #ccc;
	text-align: center;
}