今日は、MacOS風にダイアログを表示してくれる「ModalBox」と言うスクリプトをご紹介します。 どんな感じのものかというと「Lightbox」のような感じで、Mac風で・・・・(＞▽＜;; アセアセ 百聞は一見に・・・・ サンプルを見てください。
なかなか素敵に「HTMLファイル」や「テキストファイル」を表示してくれます・・・と言うか、それのみのようですが・・・試したところ「phpファイル」も表示できました・・・当たり前？？ ・・・(゜＿゜i)タラー・・・
弱点としては、画像は表示できません！！ (T^T) ・・・まぁ～方法としては、リンク先の「HTMLファイル」に画像を表示させておけば表示できるのですが・・・σ(^◇^;)ヒヤアセ
そしてもう一点、このスクリプトは設置したドメイン以外へのリンクは出来ません。つまり、自サイト内のページ又はファイルしか表示できません。
※使用には「prototype」 と 「script.aculo.us」が必要です。
設定方法
こちらからダウンロード解凍後にできた「modalbox1.6.0」フォルダを「modalbox」にリネームして、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/modalbox/ に置いたものとして説明します。）
次に「JavaScript」 と「css」を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<script src="http://example.com/wp-content/js/modalbox/lib/prototype.js" type=text/javascript></script>
<script src="http://example.com/wp-content/js/modalbox/lib/scriptaculous.js" type=text/javascript></script>
<script src="http://example.com/wp-content/js/modalbox/modalbox.js" type=text/javascript></script>
<link rel="stylesheet" href="http://example.com/wp-content/js/modalbox/modalbox.css" type="text/css" media="screen" />
黄文字の部分にファイルの設置場所（アドレス）を指定<script src="http://example.com/wp-content/js/modalbox/lib/scriptaculous.js" type=text/javascript></script>
<script src="http://example.com/wp-content/js/modalbox/modalbox.js" type=text/javascript></script>
<link rel="stylesheet" href="http://example.com/wp-content/js/modalbox/modalbox.css" type="text/css" media="screen" />
※上部分の2種のスクリプトをすでに使用している場合は「lib」フォルダ関係は記述する必要はありません。
使用方法
記述方法は、２種類の方法をご紹介・・・使用方法により使いやすい方をご使用ください。 （＾∀＾）基本的な記述方法
<a onclick="Modalbox.show(this.href, {title: this.title}); return false;
" title="ここに記述したタイトルが使われます。" href="リンク先のhtmlファイルアドレス">サンプル</a>
紺色背景部分がポイントです。" title="ここに記述したタイトルが使われます。" href="リンク先のhtmlファイルアドレス">サンプル</a>
もう一種類の記述方法
<script type="text/javascript">
<!--
window.onload = function(){
$("id名").onclick = function(){
Modalbox.show(this.href,
{title: this.title});
return false;
}
}
// -->
</script>
<a id="id名" title="ここに記述したタイトルが使われます。" href="リンク先のhtmlファイルアドレス">サンプル</a>
こちらは、上部分は<head>間に記述しても大丈夫です・・・記事内でも大丈夫・・・下部の記述は非常に簡単になります。<!--
window.onload = function(){
$("id名").onclick = function(){
Modalbox.show(this.href,
{title: this.title});
return false;
}
}
// -->
</script>
<a id="id名" title="ここに記述したタイトルが使われます。" href="リンク先のhtmlファイルアドレス">サンプル</a>
２ヶ所の「 id名 」は同じ名称にしてください。
オプション
上記の水色文字部分がオプションの指定場所になります。 上記の両方で書いてあるオプション指定が「title="～" を titleに使う指定」です・・・？？ (-"-;A ...アセアセその他オプションは下記を参照してください。
- width: 表示される枠の幅 （px）
- height: 表示される枠の高さ ・・・試したところ、高さ指定をしない場合、画面からはみ出た場合はスクロールできないようです。 （px）
- overlayDuration : オーバーレイにかかる時間 （秒）
- slideDownDuration : スライドダウンにかかる時間 （秒）
- slideUpDuration : スライドアップにかかる時間 （秒）
- resizeDuration : リサイズにかかる時間？？ （秒）
記述方法はどちらの場合も、「,」を付けて並べていくだけです。
記述例：
{title: this.title, width: 400, height: 600, overlayDuration: 2, slideDownDuration: 2, slideUpDuration: 1, resizeDuration: 2});
どちらの場合も水色文字から続けて１行で書くとこんな感じになります・・・１番最後は「,」はいりません。サンプル
残念なことに、自分の環境ではこのページ上で表示できなかったのでこちらになります。
以上、終了です。
人気度 : 28 %
（ 参考になったら、評価してねぇ～ (o*。_。)oペコッ
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)