▲PAGE TOP

メール送信フォーム(iframe)をLightBoxで表示させる方法


メール送信フォームなどをiframeごとLightBoxで表示させる方法。
今回はお問い合わせフォームをlightbox内にiframeで読み込ませます。


サーバにprettyPhotoをアップロードする
  • prettyPhotoのサイトでjQueryをダウンロードする (カスタマイズ後 lightbox.zip
  • ダウンロードしたファイルを解凍してサーバにアップロード(../java/lightbox/)する
※jQueryのダウンロードは必ず上記のprettyPhotoでダウンロードしてください。


HTML内にLightboxに読み込むiframeへのリンクを貼る
下のHTMLを適当な場所に配置する


<script src="http://www.*****.com/0102030405/java/1.5.1/jquery.min.js"></script>
<!--script src="http://www.*****.com/0102030405/java/lightbox/js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->
<link rel="stylesheet" href="http://www.*****.com/0102030405/java/lightbox/css/lightbox.css" type="text/css" media="screen" title="lightbox main stylesheet" charset="utf-8" />
<script src="http://www.*****.com/0102030405/java/lightbox/js/jquery.lightbox.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='lightbox']").lightbox();
$(".gallery:first a[rel^='lightbox']").lightbox({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
$(".gallery:gt(0) a[rel^='lightbox']").lightbox({animation_speed:'fast',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='lightbox']:first").lightbox({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='lightbox']:last").lightbox({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script> 
<ul class="gallery clearfix"></ul>
<div class="gallery clearfix"><a href="http://www.*****.com/cgi-bin/form/tmpl/form.html?iframe=true&width=600&height=90%" rel="lightbox[iframe]">お問い合わせ</a></div>

以下の点を忘れないで!
  • URLにある*****はサーバのURLに変更する
  • width=600&height=90% でインラインフレームiframeの大きさを指定する
  • HTML内に配置して終了
上記のHTMLのとおり貼り付けないと不具合が生じます。


オーバーレイした時の背景の色を変更する方法
以下のCSSを埋め込むだけで、背景色の変更ができます。
色の変更は赤文字の部分を編集する。

<style>
div.pp_overlay{background:#d4d4d4 !important ;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500}
    </style>











COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)