xhml・html

【ネットビジネス便利ツール】のモバイル対応の続きです。

今まではポップアップ画面を使っていました。サイズの小さいブラウザを新しく立ち上げて、リンク先のページを表示していました。
スマートフォンでやってみたら新しいタグが開きそこにリンク先のページが表示されるのでそれでも駄目なことはないのですが、ついでにColorboxを使ってモーダルウィンドウに表示することにしました。

Colorboxのインストールの仕方や使い方についてはColorboxの使い方：jQueryで簡単モーダルウインドウを参考にしました。少しファイル構成が変わっているようですが見ればわかります。

jQueryとColorboxはCDNサーバから読み込むこともできるそうですが、知らない間にバージョンアップしていて、ある日突然使えなくなったら焦るので、自分の使っているレンタルサーバーにファイルを置くことにしました。

Colorboxはデザインが5つあるので、サンプルはないものかと探してみたのですが見つかりませんでした。探しそこねているのだと思います。同じく探しきれておられない方のために、自分のサイトで表示して確認したときのキャプチャです。example1・・・example5と順番に並んでいます。クリックで拡大表示されます。
　　

　

別ページ（xxxxx.php）を表示したいので、htmlにはこう書きます。
html -------------------------------------------------

<a href="xxxxx.php" class="cblink">表示テキスト</a>

------------------------------------------------------

JavaScriptです。jQueryを使っているので先にjQuery読み込んで、その後で次のソースを読み込みます。
JavaScript --------------------------------------------

$(function(){

	$(".cblink").colorbox({iframe:true, width:"80%", height:"80%"});

});

------------------------------------------------------
JavaScriptが無効な環境ではxxxxx.phpに遷移します。