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

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

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

表示中のウェブページ内に小窓(小さなボックス)を重ねて表示し、その小窓の中で「別のウェブページの内容」を見せられると便利な場合があります。例えば、一時的に他のページを参照させたい場合や、補足情報を見せたい場合などです。

閲覧ページを移動させることなく別のコンテンツを重ねて表示できる方法は、具体的には以下のような場合などに活用できます。

  • ちょっと長めの注意事項を表示したい
    →常に表示するとクドいので、普段は隠しておきたい。
  • 通販の送料一覧表を表示したい
    →複数ページから参照される補足情報は、独立ページに分離しておくと管理が容易。
  • 解説用の動画を表示したい
    →YouTubeなどの動画は表示に広い空間を占有するので、通常は非表示にしておきたい。

これらの情報を見せるためだけに、わざわざ別のページに移動させる仕様だと閲覧者に不便をかけることになります。今見ているウェブページの上に重ねて表示できると便利でしょう。

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

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

例えばTwitterで特定のツイートをクリックすると、ページ全体が暗くグレーアウトした上で、そのツイートの詳細がその場に重なって表示されます。別ページには移動しないため、元の画面に素早く戻れて便利です。

このように「現在表示中のページに重ねて別のコンテンツを表示する」ことを「オーバーレイ表示」とも呼びます。


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

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

サブウインドウを開くことなく、その場で拡大画像を重ねて表示するデザイン(Lightbox系スクリプト)は、多数のウェブサイトで使われています。過去の記事「別窓を開かずに その場で拡大画像を表示する4つの方法」などでも解説いたしました。

これと同様の表示形態で、拡大画像だけではなく別のウェブページまるごとをも対象にしてオーバーレイ表示できるスクリプトがあります。

今回は、このように「別のHTMLファイルとして独立しているコンテンツ」を、現在表示中のウェブページ上に重ねて表示する方法をご紹介いたします。


 

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

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

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

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

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

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

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

上記のような、モーダルウインドウのオーバーレイ表示を実現する方法は色々ありますが、本記事では「Colorbox」というスクリプトを使う方法をご紹介いたします。背景やモーダルウインドウのデザインが5種類から選べる上、機能も豊富なスクリプトです。この「Colorbox」スクリプト一式を自サイト上に設置して、任意のページをオーバーレイ表示させてみましょう。

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