jQuery

【jQuery】モーダルシステムを実装Prowl

June 15, 2017
prowl

Prowlはレスポンシブでモーダルシステムを簡単にセットアップできるjQueryプラグイン。

Setup

CSS

<link rel="stylesheet" href="/dist/prowl.css">
<link rel="stylesheet" href="/dist/prowl_theme.css">

JS

<script src="/dist/prowl.min.js"></script>

HTML

<a class="open" data-prowl-target="example">Open the modal</a>
<div class="prowl">
	<div class="prowl-overlay">
		<div class="prowl-modal" data-prowl-id="example">
			<h2>It's a modal!</h2>
			<div class="button toggle">Close</div>
		</div>
	</div>
</div>

複数のモーダルを作成。

<a class="open" data-prowl-target="modal-one">Open first modal</a>
<a class="open" data-prowl-target="modal-two">Open second modal</a>
<div class="prowl">
	<div class="prowl-overlay">
		<div class="prowl-modal" data-prowl-id="modal-one">
			...
		</div>
		<div class="prowl-modal" data-prowl-id="modal-two">
			...
		</div>
	</div>
</div>

Options

$('.open').prowl(options) //We used the .open class in the modal markup