Colorboxで指定のURLをオーバーレイ表示するサンプル1

下記のリンクをクリックしてみて下さい。 リンク先のページが、現在表示されているこのページの上に重なるようにして開く小窓内に表示(オーバーレイ表示)されます。 詳しくは、解説記事を参照して下さい。

▼外部のHTMLをオーバーレイ表示する:

(a) ウィキペディアHOMEページ

(b) オールアバウトHOMEページ

▼内部のHTMLをオーバーレイ表示する:

インラインコンテンツ

※ここでは、Colorboxの付属CSS「1」を使っています。
※オプションでグループ名を指定してあるため、(a)と(b)は小窓内の「←」「→」ボタンを使うことで連続的に切り替えて表示できます。
※JavaScriptが使えない環境では、通常のリンクとして機能します。


解説記事に戻る

ここは、Colorboxで表示させるためにHTML内に(非表示設定で)記述された内容です。

ここに書かれている文章は、別のHTMLファイルではなく、同じHTMLファイル内に記述されています。ただ、CSSを使って「標準では非表示」になるよう装飾されているだけです。別ファイルを用意しなくて済むので、読み込み待ち時間が掛からないため、表示は高速です。

外部のHTMLファイルを読むだけでなく、このように内部に書いておいた文章を小窓内に表示させることもできます。