[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay

Post on:2014年4月23日

plainOverlayのデモ

デモではページ上のさまざまな要素、そしてページ全体にオーバーレイを適用しています。
まずは、一番上のdiv要素から。

角丸のパネルに綺麗にオーバーレイを重ねて表示し、ローディングのアニメーション（SVG）を表示しています。

iframeのウインドウにもオーバーレイを適用できます。

iframeにオーバーレイ

もちろん、ページ全体にも。

ページ全体にオーバーレイ、アニメーションでカウントダウン

jquery.jsと当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script src="jquery-1.11.0.min.js"></script>
  <script src="jquery.plainoverlay.min.js"></script>
</head>

HTMLはオーバーレイを適用する時に指定できるようidをつけておくと便利です。

<body>

  <div id="demo">パネル</div>

</body>

jQueryのセレクタで要素を指定し、スクリプトを実行します。基本書式は下記のようになります。


//show
  element.plainOverlay('show'[, options])

//hide
  element.plainOverlay('hide')

ページ全体にオーバーレイを適用する時は、下記のようになります。

$('body').plainOverlay('show');

スクリプトのオプションでは、オーバーレイのさまざまな設定ができます。