さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】magnificPopupで、インラインでモーダル開く

Pocket
LINEで送る

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;
}

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容