現在のウェブページ上に重ねた小窓の中に、別のHTMLの内容を表示したい

現在のウェブページ上に小窓を重ねて(=モーダルウインドウをオーバーレイ表示して)、その中に補足情報を表示させる例

現在のウェブページをグレーアウトさせた上で小窓を重ねて、その中に補足情報を表示させた例

現在表示中のウェブページに小窓(小さなボックス)を重ねて表示し、その小窓の中で「別のウェブページ」を見せたいと思ったことはないでしょうか? ページ移動させることなく別のコンテンツを表示できるので、一時的に他のページを参照させたい場合や、補足情報を見せたい場合などに便利です。

例えば、
  • ちょっと長めの注意事項を表示したい(=常に表示するとクドくなるので、普段は隠しておきたい)
  • 通販の送料一覧表を表示したい(=複数のページから参照される補足情報なので、独立したページに分離しておくと便利)
  • 解説用の動画を表示したい(=広い空間を占有するので、通常は非表示にしておきたい)
……といった場合にも活用できます。これらの情報を見せるためだけに、わざわざ別のページに移動させる仕様だと不便ですから。「今見ているウェブページ」の上に重ねて表示できると便利でしょう。

Twitterなど、多くのサイトでも使われているオーバーレイ表示
Twitterでユーザ名をクリックすると、オーバーレイ表示されるモーダルウインドウ内に、そのユーザのプロフィールページが表示される

Twitterでユーザ名をクリックすると、そのユーザのプロフィールページがオーバーレイ表示される

Twitterで発言者のIDをクリックすると、右図の右下側のように「その人物のプロフィール」が(別ページに移動することなく)その場で重なって表示されます。

このように「現在表示中のページに重ねて別のコンテンツを表示する」ことを、「オーバーレイ表示」とも呼びます。画像処理ソフトで「レイヤーを重ねる」ようなイメージです。


 
その場で拡大画像を表示するLightbox系スクリプトのウェブページ版
その場で拡大画像を表示するLightbox系スクリプト

その場で拡大画像を表示するLightbox系スクリプト

サブウインドウを開くことなく、その場で拡大画像を重ねて表示するデザイン(Lightbox系スクリプト)は、多数のウェブサイトで使われています。

過去の記事「別窓を開かずに、その場で拡大画像を表示する方法」や「サムネイル画像をその場で全画面に拡大表示させる方法」でも解説致しました。

これと同様の表示形態で、「拡大画像」だけではなく、「別のウェブページまるごと」すらも対象にしてオーバーレイ表示できるスクリプトもあります。今回は、このように「別のHTMLファイルとして独立しているコンテンツ」を、現在表示中のウェブページ上に重ねて表示する方法をご紹介致します。


 

別のHTMLの内容を、現在のウェブページ上に重ねて表示する例

現在のウェブページ上に小窓を重ねて(=モーダルウインドウをオーバーレイ表示して)、その中にAll AboutのHOMEページをを表示させた例

現在のウェブページをグレーアウトさせた上で小窓を重ねて、その中にAll Aboutのトップページを表示させた例

本記事でサンプルとして作成するページは、右図のようなものです。ここで、ページ上にあるリンクをクリックすると、

  1. 今見ているページ全体がグレーアウトする(※全面が暗くなり、操作できなくなる)
  2. 現在表示中のページに重ねて現れた小窓(小さなボックス)内に、外部サイトのコンテンツが表示される
  3. 小窓を閉じると、元の表示に戻る

……という動作をします。

※この「重ねて表示された部分を消すまで、他の操作をできなくする」というインターフェイスは、「モーダルウインドウ」とも呼ばれます。ここでは実際には「独立したウインドウ」を表示しているわけではないので、擬似的なモーダルウインドウですが。

上記の動作(=モーダルウインドウのオーバーレイ表示)を実現する方法は色々ありますが、本記事では「Colorbox」というスクリプトを使う方法をご紹介致します。小窓のデザインが5種類から選べる上、機能も豊富なスクリプトです。この「Colorbox」を自サイト上に設置して、任意のHTMLをオーバーレイ表示させる方法をご紹介致します。

それでは次のページから、Colorboxスクリプトを使って外部サイトのコンテンツを現在のページ上に重ねて表示する方法を見ていきましょう。