複数のポップアップを重ねて表示「dialog」
当ページのリンクには広告が含まれています。
スポンサーリンク
ポップアップ（ダイアログボックス）を重ねて表示することができるプラグイン「dialog」を紹介します。
jQueryプラグイン「dialog」
このプラグインを使えば、サイトのお知らせなどを表示するポップアップ（ダイアログボックス）を複数重ねて表示することができます。
これらのポップアップにはタイトル、メッセージや画像などを表示することができるので、使い方によってはサイトにおもしろい効果を付加することができるかもしれませんね。
スポンサーリンク
デモで重なり合ったポップアップをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Dialogのデモでーす。">
<title>Dialog - jQueryプラグイン</title>
<link rel="stylesheet" href="css/dialog.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dialog.js"></script>
<script>
var dialog1,
dialog2,
dialog3 = null;
$(document).ready(function() {
dialog1 = $('#dialog1').dialog().trigger('dialog-open');
dialog2 = $('#dialog2').dialog().trigger('dialog-open');
dialog3 = $('#dialog3').dialog().trigger('dialog-open');
});
</script>
</head>
<body>
<h1>Dialog のデモだよ。</h1>
<div id="dialogsContainer">
<div id="dialog1">
<div class="dialog-title">タイトル</div>
<div class="dialog-content labelStyle">
<label class="labelStyle">重ねて表示することができます！</label>
</div>
</div>
<div id="dialog2">
<div class="dialog-title">タイトル</div>
<div class="dialog-content labelStyle">
<label class="labelStyle">ダイアログボックス（ポップアップ）を</label>
</div>
</div>
<div id="dialog3">
<div class="dialog-title">タイトル</div>
<div class="dialog-content labelStyle">
<label class="labelStyle">このように！！！</label>
</div>
</div>
</div>
</body>
</html>
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» dialog
スポンサーリンク