今日の人気記事

  1. 簡単にドロップダウンメニューがつくれる「Superfish」
  2. アニメーションでテキストが切り替わる「Words Rotator」
  3. グラフにマウス操作で動かせる目盛りを実装「2D Slider and Range」
  4. 年月の選択ボタンを実装「Multiple Month Picker」
  5. 指定した要素をドラッグして移動「tinyDraggable」

ヘルプメッセージなどをポップアップで表示「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

スポンサーリンク

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