オーバーレイ表示を実現する方法

海外で流行中のダイアログ表示をjQuery UIで

2009年07月16日 15時00分更新

文● 藤本壱

　ログインフォームや問い合わせフォームなどをWebページの遷移なしにダイアログボックスで表示する――。近頃、海外のECサイトやポータルサイトなどでこうしたUI（ユーザーインターフェイス）を見かけます。もともと閲覧しているページの上にダイアログボックスがオーバーレイで表示されるので見栄えがよく、ページを移動せずに済むので、もとのページにすぐに戻れて便利です。

　UIに特化したJavaScriptライブラリー「Query UI」を使えば比較的簡単に実装できますので、Webページ上にオーバーレイでダイアログボックスを表示する方法を紹介します。

jQuery UIのダイアログ機能を使うための準備

　「jQuery UI」はjQueryのUI関連機能をまとめたライブラリー郡です。タブパネルやドラッグ＆ドロップ機能などでこれまでも何度か登場（関連記事1、関連記事2）しましたが、今回はダイアログボックスのコンポーネント「Dialog」の紹介です。

　はじめにダイアログボックスを使うための準備をしましょう。jQuery UIのダウンロードページで「UI Core」と「Dialog」のチェックをオンにしてダウンロードボタンをクリックします。なお、「Dialog」と「Draggable」とを組み合わせるとドラッグ＆ドロップでダイアログを移動できるようになりますので、必要な場合はDraggableにもチェックを入れてダウンロードしてください。


jQuery UIのダウンロードのダウンロードページ

　ダウンロードしたファイルを展開すると「js」「css」などのフォルダと、いくつかのファイルが現れます。そのうち、「js」「css」フォルダを使用したいサーバーにアップロードします。

　続いて、ダイアログボックスを使いたいHTMLファイルに以下の3行を追加し、JSファイルとCSSファイルを読み込ませます。


<link type="text/css" href="http://アップロード先/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />  
<script type="text/javascript" src="http://アップロード先/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://アップロード先/js/jquery-ui-1.7.2.custom.min.js"></script>