今日の人気記事

  1. 画像に拡大・縮小ボタンを「Zoomer」
  2. テキストの色や背景色をフェード・アニメで変化「Color animation」
  3. 入力に応じてテキストエリアの高さを調節「Autosize」
  4. 進捗の割合(%)をプログレスバーで表示「ProgressBar」
  5. テキスト・画像・iframeなどに対応したLightbox「Featherlight」

ヘルプメッセージなどをポップアップで表示「jqModal」 - jQueryプラグイン

スポンサーリンク

ヘルプメッセージなどをポップアップで表示するプラグイン「jqModal」を紹介します。

jqModal

このプラグインを使えば、さまざまなメッセージをポップアップ(モーダルウィンドウ)表示することができます。要素を指定するだけなので、簡単に実装することができます。

フォーム入力ページのヘルプメッセージなどを作成する場合に便利かもしれませんね。

スポンサーリンク

デモをご覧ください。

「jqModal」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="jqModalのデモでーす。">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jqModal.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="jqModal.css" />
</head>
<body>
<h1>jqModalのデモでーす</h1>

<div>
<a href="#" class="jqModal">ここをクリック!</a>
</div>

<div class="jqmWindow" id="dialog">
<a href="#" class="jqmClose">Close</a>
<hr>
ここにメッセージを記述します。
<br /><br />
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</div>

<script>
$().ready(function() {
	$('#dialog').jqm();
});
</script>

</body>
</html>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» jqModal

スポンサーリンク

関連記事(一部広告含む)