ポップアップ画面を表示したい場合が多々あります。
昔は、window.open() とかを良く使いましたが、最近では、LightBox風の表示が好まれています。
画像のサムネイルをクリックすると、背景がグレーアウトして、画像が拡大表示される"あれ"です。
体裁も Colorbox を使う一つの要因ですが、一番大きいのは、ブラウザのポップアップ機能を使わない事です、
また、モーダル（呼び出し元の画面をいじれない）ですので、親画面との同期も簡単です。
以下、Colorboxを使うための大まかな手順(メモ書き)です。
【設置方法】
zip でダウンロードし、別途 jquery もダウンロード。
アプリ直下でも良いが、"js" フォルダを作って、
colorbox.css と images フォルダは sample1～5の
どれか好みのものをコピーする。
(css とイメージは閉じるボタン等が入っている)
js / jquery.js
/ colorbox / colorbox.css
/ jquery.colorbox.js
/ images
【使い方】
① html のヘッダーで読込
＜link href="js/colorbox/colorbox.css" rel="stylesheet" type="text/css" /＞
＜script type="text/javascript" src="js/jquery.js"＞＜/script＞
＜script type="text/javascript" src="js/colorbox/jquery.colorbox.js"＞＜/script＞
② html の JavaScript でセレクタを設定
ここでは、class="iframe" が対象の場合
<script>
$(document).ready(function(){
$(".iframe").colorbox({
iframe:true,
width:"80%",
height:"80%"
});
});
</script>③ 対象の操作を定義
クリックすると、ボックスが開いて、href の URL を呼び出す。
<html>
：
<a href="preview.jsp" class="iframe" title="">開く</a>
：
</html>「プレビュー」と言いながら、これでは保管後でないと表示できません。
form を POST 出来れば良いのですが、ちょっと面倒そうなので、とりあえずはこれで・・・。
| « 前頁 | 次頁 » |