「jQuery」と「jQuery UI」で HTML に彩りを添えよう…第７回「Dialog」ボタンクリックでコンテンツをポップアップ

概要

「Dialog」公式ページ
jQuery UI Documentation / API / 1.8 / Dialog  

「Dialog」についての「Demos & Documentation」
jQuery UI Demos & Documentation / Dialog  


ダイアログボックスは…ブラウザの「親ウィンドウ」内に…

「説明」「拡大画像」「埋め込み動画」…などなどの…

「子ウインドウ」を…ページ読み込みタイミングや…

「テキストリンク」「ボタン」「サムネイル画像」などの…

「マウスホバー」や「クリック」でポップアップ表示させる…

…ってな感じの…お便利機能です…

ウインドウ標準などのカスタマイズされていない「ツールチップ」と違い…

テキストのコピーもできますし…「親ウィンドウ」内の…

お好きな場所に移動もできます…表示方法を大別すると…

「親ウィンドウ」を操作できるようにそのままでポップアップ…と…

「親ウィンドウ」を操作できないように…

「親ウィンドウ」にオーバーレイ処理をしてポップアップ…

…の…２種類です…更には…

「子ウインドウ」にも「親ウィンドウ」と同等の機能を盛り込む事ができます…

…ので…導入にあたっては事前に「子ウインドウ」に導入したい機能の…

過去記事のカスタムコードも設定しておいて下さい…

それでは…いつものように…

違和感を覚え変更した点を書き出してみましょう…

1. 「minWidth」や「minHeight」がデフォルトなのでテキスト量によっては無駄なスペースが生じますので「minHeight」を「false」と設定します…
2. 日本語環境ではダイアログのリサイズは不要でしょう…改行や全角スペースでテキスト量を調整するのが良いでしょう…
3. タイトルが左寄せなので…中央揃えに変更します…
4. 下部にボタンを生成する設定の場合⑤の様な気持悪いスペースが生じますので…「最後まで読んでくれてありがとう」的なメッセージを表示させ…更に「Close」ボタンにアイコンも追加します…
5. 横幅のデフォルトが「300px」なので「width」を「auto」と設定します…
6. 「modal」でダイアログを表示させる設定の場合「overlay」がデフォルトですが…「overlay」の色が気に入らないので変更し…更には…「overlay」の領域のクリックでもダイアログを閉じられるようにします…
7. タイトルバーの閉じるアイコンの位置がタイトル幅とテキスト幅の関係で被る場合があるので…タイトルバーの右上に変更します…
8. ダイアログで表示したいコンテンツの分だけダイアログが必要なので…お好みですが…「id」は「class」に変更します…

「Dialog」用のカスタムコードと「CSS」

それでは…「Dialog」用のカスタムコードです…

一部 CSS を記述していますが気にしない方向で…

「Dialog」用のカスタムコード

/* ボタンパネル無し、モーダル無し */
$(".dialog1,.dialog2,.dialog3,.dialog4,.dialog5").dialog({resizable:false,autoOpen:false,width:"auto",minHeight:"false",show:"clip",hide:"clip"});
/* ボタンパネルのクローズボタン共通設定 */
$(".ui-dialog-buttonpane").find('button:contains("Close")').removeClass("ui-button-text-only").addClass("ui-button-text-icon ui-state-focus close2");
/* ボタンパネル有り、モーダル有り */
$(".dialog0").dialog({modal:true,resizable:false,autoOpen:false,width:"auto",minHeight:"false",show:"clip",hide:"clip",open:function(){$(".ui-dialog-buttonpane").find('button:contains("Close")').css({"color":"#f15b55","font-weight":"bold"})},buttons:{"Thanks!! for reading till the end...":function(){$(this).dialog("close")},"Close":function(){$(this).dialog("close")}}});
/* ボタンパネル無し、モーダル有り、タイトルバー下部 */
$(".dialog-video").dialog({modal:true,resizable:false,autoOpen:false,width:"auto",minHeight:"false",show:"clip",hide:"clip"});
$(".dialog-video").dialog("widget").find(".ui-dialog-content").css({"margin":"0 0 35px 0"}).dialog("widget").find(".ui-dialog-titlebar").css({"position":"absolute","bottom":"1px","left":"0","width":"95%"});
/* タイトルバーのクローズボタン共通設定 */
$(".ui-dialog-titlebar-close").css({"position":"absolute","top":"7px","right":"-3px"});
/* オーバーレイのクリックでダイアログを閉じる設定 */
$(".ui-widget-overlay").live("click", function(){$(".dialog0").dialog("close")});
$(".ui-widget-overlay").live("click", function(){$(".dialog-video").dialog("close")});
/* ダイアログを表示するトリガー設定 */
$(".show-dialog1").click(function(){$(".dialog1").dialog("open")});$(".show-dialog2").click(function(){$(".dialog2").dialog("open")});$(".show-dialog3").click(function(){$(".dialog3").dialog("open")});$(".show-dialog4").click(function(){$(".dialog4").dialog("open")});$(".show-dialog5").click(function(){$(".dialog5").dialog("open")});
$(".show-dialog0").click(function(){$(".dialog0").dialog("open")});
$(".show-dialog-video").click(function(){$(".dialog-video").dialog("open")});

ご自身のサイトで使用するダイアログの数だけ…

ダイアログやトリガーを固有の「id」や「class」で指定します…

必要に応じて増減して下さい…

続いて…「Dialog」用の CSS 共通設定です…

「Dialog」用の CSS

.ui-dialog-title{text-align:center;width:100%;color:#8AC75A;font-style:italic}
.ui-dialog-content{font-size:12px;font-style:italic;text-align:left}
.ui-dialog-buttonpane .ui-button-text{font-size:11px;font-style:italic}
.ui-dialog{-moz-box-shadow:0 0 15px #58a;-webkit-box-shadow:0 0 15px #58a;box-shadow:0 0 15px #58a}
div.ui-widget-overlay{position:fixed;background:#000 url(透過用リピート画像の URL)}

お好みで適宜変更して下さい…上記…カスタムコードと CSS を導入すると…

こんな感じのダイアログが使えます…

サンプルと「HTML」マークアップ

モーダルウインドウ無し

先ずは…モーダル無しのパターン５種類です…

「dialog1」
ボタンクリックでテキストをポップアップ表示します…
テキストはダミーテキストです…
第２回「Button」のカスタムコードも必要です…

驩驚れ礨栤 㦵ひょ奤ゞメ 榞妥堩焨稞 ぎゃヴィェチュ にゃ飌,
ぴゃ.夯䩵盨 むば㶣䧪㤣 み揣訦でぢゅ こべぬ 櫦갣 ぎょ㠣わ
ゝちゅ ラぽ誧禤ろ かこべぬギュ 榞妥堩焨稞, 㛥へ㠯焧ホゥ

 Example Dialog / Text

上記…「dialog1」の HTML マークアップ
「dialog1」の HTML マークアップ

<div class="dialog1" title="You can drag this dialog!">
驩驚れ礨栤 㦵ひょ奤ゞメ 榞妥堩焨稞 ぎゃヴィェチュ にゃ飌,
ぴゃ.夯䩵盨 むば㶣䧪㤣 み揣訦でぢゅ こべぬ 櫦갣 ぎょ㠣わ 
ゝちゅ ラぽ誧禤ろ かこべぬギュ 榞妥堩焨稞, 㛥へ㠯焧ホゥ
</div>
<span class="buttons show-dialog1"><a><span class="id211"></span> Example Dialog / Text</a></span>

「dialog2」
ボタンクリックで画像をポップアップ表示し…
ポップアップした画像をクリックすると画像情報がスライド表示されます…
第２回「Button」第５回「Effects/Slide」のカスタムコードも必要です…

(画像クリックで詳細情報が開閉します…)

画像名 : Cube
画像サイズ (px) : 400 x 320
作成日 : 2012.07.20
作者 : passer-by198

 Example Dialog / Image &「Effects/Slide」

上記…「dialog2」の HTML マークアップ
「dialog2」の HTML マークアップ

<div class="dialog2" title="You can drag this dialog!">
<img class="collapse20" alt="Cube" border="0" height="320" width="400" src="画像 URL" />
(画像クリックで詳細情報が開閉します…)
<div style="display:none" class="collapse30 toggle ui-corner-all">
画像名 : Cube
画像サイズ (px) : 400 x 320
作成日 : 2012.07.20
作者 : passer-by198
</div>
</div>
<span class="buttons show-dialog2"><a><span class="id211"></span> Example Dialog / Image &「Effects/Slide」</a></span>

「dialog3」
ボタンクリックで「Accordion」と「Tabs」を…
「Progressbar」で区切って表示します…
第２回「Button」第３回「Accordion」第４回「Tabs」第６回「Progressbar」
…のカスタムコードも必要です…

• First
• Second
• Third

ダイアログボックスのテストです…
ウインドウの…お好きな場所に移動できます…

Content-2

Content-3

First

ダイアログボックスのテストです…
ウインドウの…お好きな場所に移動できます…

Second

Content-2

Third

Content-3

 Example Dialog / 「Tabs」&「Progressbar」&「Accordion」

上記…「dialog3」の HTML マークアップ
「dialog3」の HTML マークアップ

<div class="dialog3" title="You can drag this dialog!">
<div class="tabs">
<ul>
<li><a href="#tabs-11">First</a></li>
<li><a href="#tabs-12">Second</a></li>
<li><a href="#tabs-13">Third</a></li>
</ul>
<div id="tabs-11">
ダイアログボックスのテストです…
ウインドウの…お好きな場所に移動できます…</div>
<div id="tabs-12">
Content-2</div>
<div id="tabs-13">
Content-3</div>
</div>

<div class="progressbar value3">
</div>

<div class="accordion">
<div>
<h6 class="current">
<a href="#">First</a></h6>
<div>
ダイアログボックスのテストです…
ウインドウの…お好きな場所に移動できます…</div>
</div>
<div>
<h6>
<a href="#">Second</a></h6>
<div>
Content-2</div>
</div>
<div>
<h6>
<a href="#">Third</a></h6>
<div>
Content-3</div>
</div>
</div>
</div>
<span class="buttons show-dialog3"><a><span class="id211"></span> Example Dialog / 「Tabs」&「Progressbar」&「Accordion」</a></span>

「dialog4」
ボタンクリックで動画のサムネイル画像とテキストを表示し…
サムネイル画像をクリックすると埋め込み動画がスライド表示されます…
第２回「Button」第５回「Effects/Slide」のカスタムコードも必要です…

(YouTube の埋め込み iframe を画像クリックで開閉します)

ダイアログボックスのテストです…
ウインドウの…
お好きな場所に移動できます…

 Example Dialog / Video &「Effects/Slide」

上記…「dialog4」の HTML マークアップ
「dialog4」の HTML マークアップ

<div class="dialog4" title="You can drag this dialog!">
<img class="collapse21" alt="Google Chrome, Japan" border="0" height="48" width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQxbQo1r4c_5-HfONfHUrCX7b8w4To1qNqNtaQltRhLBtO-HHLPM1Ok06o1iTKBpHbmDDfBk0kN7qYIdAbXKfaE8uCNByJJkWur55lUBFA-VS2eJ53-rYBeVdDnuxLpUlCxKvyU4FyLqMB/s200/Google+Chrome%252C+Japan.jpg" style="float:left;margin-right:1em; margin-bottom:.5em" />(YouTube の埋め込み iframe を画像クリックで開閉します)
<div class="collapse31" style="display:none">
<iframe width="560" height="315" src="埋め込み動画の URL" frameborder="0" allowfullscreen></iframe>
</div>

ダイアログボックスのテストです…
ウインドウの…
お好きな場所に移動できます…
</div>
<span class="buttons show-dialog4"><a><span class="id211"></span> Example Dialog / Video &「Effects/Slide」</a></span>

「dialog5」
ダイアログを表示させるトリガーを変えてみましょう…
テキストかサムネイル画像のクリックで埋め込み動画が表示されます…

「トリガー」

上記…「dialog5」の HTML マークアップ
「dialog5」の HTML マークアップ

<div class="dialog5" title="You can drag this dialog!">
<iframe width="560" height="315" src="埋め込み動画の URL" frameborder="0" allowfullscreen></iframe>
</div>
<img class="show-dialog5" alt="Google Chrome, Japan" border="0" height="48" width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQxbQo1r4c_5-HfONfHUrCX7b8w4To1qNqNtaQltRhLBtO-HHLPM1Ok06o1iTKBpHbmDDfBk0kN7qYIdAbXKfaE8uCNByJJkWur55lUBFA-VS2eJ53-rYBeVdDnuxLpUlCxKvyU4FyLqMB/s200/Google+Chrome%252C+Japan.jpg" style="float:left;margin-right:1em; margin-bottom:.5em" /> <span class="show-dialog5" style="color:#1E90FF;"><b>「トリガー」</b></span>

モーダルウインドウ有り

続いて…モーダル有りのパターン２種類です…

「dialog0」
ボタンクリックでテキストが「親ウィンドウ」をオーバーレイして表示されます…
オーバーレイのクリックでもダイアログを閉じる事ができます…
下部にボタンパネルが生成され…
「最後まで読んでくれてありがとう」的なメッセージと「Close」が…
ボタン化して…どちらのボタンをクリックしてもダイアログか閉じます…
サンプルはダミーテキストですが…
しっかりしたメッセージなどを表示したい場合にお使い下さい…
サイトで実装していますので…トップページなどでもご確認いただけます…

驩驚れ礨栤 㦵ひょ奤ゞメ 榞妥堩焨稞 ぎゃヴィェチュ にゃ飌,
ぴゃ.夯䩵盨 むば㶣䧪㤣 み揣訦でぢゅ こべぬ 櫦갣 ぎょ㠣わ
ゝちゅ ラぽ誧禤ろ かこべぬギュ 榞妥堩焨稞, 㛥へ㠯焧ホゥ

 Example Modal Dialog / Text「add Button Panel」

上記…「dialog0」の HTML マークアップ
「dialog0」の HTML マークアップ

<div class="dialog0" title="You can drag this dialog!">
驩驚れ礨栤 㦵ひょ奤ゞメ 榞妥堩焨稞 ぎゃヴィェチュ にゃ飌,
ぴゃ.夯䩵盨 むば㶣䧪㤣 み揣訦でぢゅ こべぬ 櫦갣 ぎょ㠣わ 
ゝちゅ ラぽ誧禤ろ かこべぬギュ 榞妥堩焨稞, 㛥へ㠯焧ホゥ
</div>
<span class="buttons show-dialog0"><a><span class="id211"></span> Example Modal Dialog / Text「add Button Panel」</a></span>

「dialog-video」
クリックで埋め込み動画が表示されるのは「dialog5」と同様ですが…
埋め込み動画をポップアップさせる場合…
タイトルバーは下部に置いたほうが「しっくりきそう」だったので…
お遊びで作ってみました…

 Example Modal Dialog / video 「Title Position : bottom」

上記…「dialog-video」の HTML マークアップ
「dialog-video」の HTML マークアップ

<div class="dialog-video" title="You can drag this dialog!">
<iframe width="560" height="315" src="埋め込み動画の URL" frameborder="0" allowfullscreen></iframe>
</div>
<span class="buttons show-dialog-video"><a><span class="id211"></span> Example Modal Dialog / video 「Title Position : bottom」</a></span>

もう少し解説

尚…ボタンタイプのトリガーでは…

ポップアップ表示される事をイメージしてもらうために…

独自アイコンを CSS Sprites で表示させていますが…

 Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


「jQuery UI」のデフォルトアイコンを使用するには…

第２回「Button」を参照して下さい…

サンプル作成はしませんでしたが…

トリガー無しで…ページ読み込みタイミングで…

ダイアログを表示したい場合は…

カスタムコードの…

「トリガー部分」と「autoOpen:false,」を削除して下さい…

「show」と「hide」のエフェクトには…

「clip」を指定していますが…変更したい方は…

jQuery UI Demos & Documentation / Effect  

…のプルダウンメニューで…動作確認して…

カスタムコードのエフェクト名を変更して下さい…

おわりに…

以上ですが…ダイアログの…ご自身のサイトでの使い所をイメージして…

色々と組み合わせて…独自のダイアログを構築する事を…お奨めします…

お疲れ様でした……最後までお読みいただきましてありがとうございます…

こちらの記事も…お薦めです…

 jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト

 「CSS3」の「text-shadow」を使ってトップページだけ違うデザインにする

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery / Extra JavaScript Current-Label : jQuery