わずが2KBのJQUERYモーダルウィンドウ実装スクリプト

Pop EasyはRemodalよりもさらに軽量。jqueryでモーダルウィンドウを実装するためのスクリプト。

通常版
jquery.modal.js　→　5キロバイト

min版はさらに軽量で
jquery.modal.min.js　→　2キロバイト

Remodalと違いデフォルトではスマートフォンには対応していないため、スマートフォン向けサイトで使用する場合はスタイルシートでポップアップウィンドウのサイズを設定する等の必要があるが、エフェクトの指定等も簡単に出来るからサイトの高速化を考えている人にはおススメなスクリプトと言えよう。

設置は簡単。

まずは最小限のスタイルシート

CSS

<style>
.modal p {
	font-size: 14px;
	text-align: left;
	margin: 10px 0 0;
}
.modal p:hover {
	cursor: pointer;
}
.overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;
}
.modal {
	display: none;
	background: #eee;
	padding: 0 20px 20px;
	overflow: auto;
	z-index: 1001;
	position: absolute;
	width: 500px;
	min-height: 300px;
}
</style>

javascriptはbody閉じタグの直前に

JAVASCRIPT

<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type='text/javascript' src='./js/jquery.modal.js'></script>

オプションの設定のjavascriptを読み込む

JAVASCRIPT

<script type='text/javascript'>
$(document).ready(function(){
	$('.modalLink').modal({
		trigger: '.modalLink',
		olay:'div.overlay',
		modals:'div.modal',
		animationEffect: 'fadeIn',
		animationSpeed: 400,
		moveModalSpeed: 'fast',
		background: '000000',
		opacity: 0.5,
		openOnLoad: false,
		docClose: true,
		closeByEscape: true,
		moveOnScroll: true,
		resizeWindow: true,
		videoClass:'video',
		close:'.closeBtn'
	});
});
</script>

オプションの一部を説明すると

animationEffect
スライドインまたはフェードイン

animationSpeed
moveModalSpeed
表示速度

background
オーバーレイの背景色

opacity
オーバーレイの透明度

HTML

呼び出しボタン（リンク）

<a class="modalLink" href="#modal1">Click</a>

オーバーレイのためのタグが別途必要

<div class="overlay"></div>

ポップアップするモーダルウィンドウはこんな感じ

<div id="modal1" class="modal">
	<p class="closeBtn">Close</p>
	<h2>モーダルウィンドウのサンプル</h2>
</div>

サンプルページ

ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

ダウンロードはこちら
http://thomasgrauer.com/popeasy/

CSS

JAVASCRIPT

JAVASCRIPT

HTML

Related posts: