サブウインドウを開かずに済ませる代替方法いろいろ

最後に、サブウインドウを開かずに済ませる代替方法を3つご紹介いたします。

現在のページ上に、別HTMLの内容を重ねて表示する方法
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

現在表示中のウェブページ全面をグレーアウトさせた上で「小さなボックス」を重ねて表示し、そこに「別のHTMLの中身」を表示する方法があります。この方法ならサブウインドウを開く必要はありません。

ここでは「Colorbox」というスクリプトを使って、任意のウェブページの中身を「今見ているページ」の上からオーバーレイ表示する方法を解説しています。


 
別窓を開かずに、その場で拡大画像を表示する4つの方法
画像をその場で拡大表示する

画像をその場で拡大表示する

サブウインドウを開く目的が「拡大画像を表示するため」なのであれば、Lightbox系スクリプトを使う方法がお勧めです。サムネイル画像のクリックで拡大画像を表示するページを作る際によく使われているスクリプトで、ページを移動したり別ウインドウを出したりすることなく、その場で拡大画像を表示できます。

なお、拡大画像を全画面に拡大表示する方法としては、「サムネイル画像をその場で全画面に拡大表示させる方法」があります。こちらもご参照下さい。


 
画像にマウスを載せた際に、半透明の説明を重ねる方法
マウスが載ったときに、半透明の説明文を表示

マウスが載ったときに、半透明の説明文を表示

サブウインドウを開く目的が、ちょっとした補足説明文を表示するだけなのであれば、その場で説明文を浮き上がらせる方法を使っても良いのではないでしょうか。ここでは、マウスを載せたときにだけ「半透明の説明文」が下方からスライドして現れる表示効果の作り方を解説しています。



 

閲覧者に不便をかけないサブウインドウの開き方と、サブウインドウを使わない代替方法

今回は、JavaScriptで作るサブウインドウの問題点を解決する方法と、そもそもサブウインドウを使わずに済ませる方法をご紹介いたしました。ぜひ、試してみて下さい。また、下記の関連記事もあわせてご参照下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。