今日の人気記事

  1. 文字数に応じてテキストエリア高さを自動調節「autoexpand」
  2. マインドマップを描画「js-mindmap」
  3. 画面の端についてくるメニューを設置「mb.extruder」
  4. パスワードの表示/非表示を切り替える「preventPasswordTypo」
  5. 数値をアニメーションでカウントアップ「Numerator」

複数のポップアップを重ねて表示「dialog」

スポンサーリンク

ポップアップ(ダイアログボックス)を重ねて表示することができるプラグイン「dialog」を紹介します。

jQueryプラグイン「dialog」

このプラグインを使えば、サイトのお知らせなどを表示するポップアップ(ダイアログボックス)を複数重ねて表示することができます。

これらのポップアップにはタイトル、メッセージや画像などを表示することができるので、使い方によってはサイトにおもしろい効果を付加することができるかもしれませんね。

スポンサーリンク

デモで重なり合ったポップアップをご覧ください。

「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

スポンサーリンク

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