jQueryを使ったオーバーレイ表示

Webアプリを作っていると、ユーザビリティ面からAjaxを使ってサーバーと通信させるケースはよくあるかと思います。この記事では、そういったケースに使えるかもしれない、jQueryを使ったオーバーレイ表示のやり方を紹介します。

jQueryを使ったオーバーレイ表示のサンプル

HTMLファイルを作成する

まずはHTMLファイルを作成します。このサンプルでは、ボタンが2つ表示されているだけの簡単な画面を使います。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/html5reset-1.6.1.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/common.js"></script>
  </head>
  <body>
    <div class="button_area">
      <button id="button1">オーバーレイをかける</button>
      <button id="button2">メッセージを表示する</button>
    </div>
    <div id="loading_bar"><p>読み込み中</p></div>
    <div id="overlay"></div>
  </body>
</html>

ここでは、BODYタグの下のレイヤーに、IDがそれぞれ「loading_bar」と「overlay」のDIVタグを配置してあります。これらはCSSによって最初は非表示になっており、オーバーレイ表示する場合のみ非表示を解除させます。

なお、「html5reset-1.6.1.css」というCSSファイルはGoogle Codeに登録されている、各ブラウザ間の表示の差分などをリセットしてくれるものです。

CSSファイルの作成

CSSファイルには、「overlay」と「loading_bar」の表示などを調整します。

#overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  /*
  オーバーレイの位置を絶対位置にします。
  * この例では画面全体に対してなので、absoluteでも問題ないです。
  * 特定のパーツにかける場合はfixedにしないとスクロールに対応できません。
  */
  position: fixed;
  background-color: #ccc;
  /* 透明度を指定します。 */
  filter: alpha(opacity=20);
  opacity: 0.2;
}
#loading_bar {
  top: 0px;
  /* fixedにしておくとスクロールしても固定されたままになります。 */
  position: fixed;
  width: 100%;
  display: none;
}
#loading_bar p {
  margin: 0 auto;
  padding-top: 8px;
  width: 200px;
  height: 18px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #000;
  background-color: #ff9;
  text-align: center;
}
.button_area {
  margin: 20px 0 0 30px;
}
.button_area button {
  margin-right: 20px;
}

「#overlay」は「opacity(filter: alpha)」で透明度設定しています。また、「position」に「fixed」を指定して、位置を絶対位置にしています。今回の例では画面全体にかけるので「absolute」でも同じですが、特定のパーツにかける場合は「fixed」にしておかないとスクロール時にずれてしまいます。

「loading_bar」も絶対値で表示させたいため、「position」を設定しています。また、入れ子のPタグの横のマージンを「auto」にして、「読み込み中」の文字を中央に表示させるようにしています。

JSファイルの作成

JSファイルでは、ボタンがクリックされた際にオーバーレイ表示などの非表示を解除し、通信終了後に再度非表示に戻しています。

// オーバーレイを表示する関数です。画面全体を覆います。
function showOverlay() {
  $("#overlay").show();
}

// オーバーレイを非表示にする関数です。
function hideOverlay() {
  $("#overlay").hide();
}

// ローディングバーを表示する関数です。
function showLoading() {
  $("#loading_bar").show();
}

// ローテングバーを隠す関数です。
function hideLoading() {
  $("#loading_bar").hide();
}

$(function() {
  $("#button1").click(function() {
    showOverlay();
    showLoading();
    $.ajax({
      dataType: "json",
      url: "http://api.18th-technote.com",
      success: function(res) {
        // 処理が終了したらオーバーレイとローディング文言を隠します。
        hideLoading();
        hideOverlay();
      },
      error: function(XMLHttpRequest, status, errorThrown) {
        // エラーが発生した場合もオーバーレイとローディング文言を隠します。
        hideLoading();
        hideOverlay();
      }
    });
  });
  $("#button2").click(function() {
    alert("オーバーレイ表示中は、このメッセージは表示されません。");
  });
});

以上で完成です。このサンプルでオーバーレイ表示させた場合、以下のような画面になります。なお、サンプルの確認は「Chrome」「Firefox」「Safari」「Opera」のみで、「IE」ではやっていないのでご注意ください。

オーバーレイ表示

この記事が役に立った場合、シェアしていただけると励みになります!!