CSSで全画面オーバーレイを実装する方法&コード例

オーバーレイ表示したいのは、例えばこんな場面。

  • 画面全体を無効化したいとき
  • 操作を一時的にブロックしたいとき

こういうオーバーレイ、作れると意外と便利です。

そこで CSSで全画面オーバーレイを作る方法 を紹介します。

また jQuery からオーバーレイ切り替えするコード例とかも

全画面オーバーレイを実装する2つの手順

ここでは 画面無効化用オーバーレイ を作ってみます。

その手順というのが次の2ステップ

 

1.まずオーバーレイ用の要素を作る

1つめの手順は オーバーレイ用の要素 を設置すること

ここでは次のような要素を定義してみました。

な~~んの変哲もないようなdiv要素

とりあえず何の中身がないオーバーレイということで(色付き半透明)

テキストとか表示する方法は後で紹介します。

 

2.全画面を覆うCSSを追加する

最後にオーバーレイ要素に次のCSSを適用

▼ 実際に適用したCSSコード例

位置を position: absolute;  にし、幅・高さを画面いっぱいにするだけ

あと他のどの要素より上に表示するのに z-index: 2147483647;  を指定してます。

できあがったオーバーレイの見た目&動作

今紹介したのが、プレーンなオーバーレイの作り方

このオーバーレイを 適当なフォームを作って表示 してみました。

▼ オーバーレイ表示する前のフォーム画面

オーバーレイを表示するためだけに作った超適当なフォーム

▼ オーバーレイ表示されたフォーム画面

フォーム上に今作ったフォームを表示してみた

こういう感じで半透明に被せてます。

  • フォーム内の input を1つずつ disable にしたり、
  • 画面全体を一時的に操作不可にしたりとか・・・

そういうときにオーバーレイは便利ですね。

オーバーレイ中央に文字・画像表示するには

ちなみに オーバーレイ上にテキスト(画像)表示 もできます。

その場合の作り方は次の通り

 

1.オーバーレイ要素内にテキスト要素作成

ここでは text  というクラス名を持つ子要素を作ることに。

 

2.中央にテキスト(画像)表示できるようにCSSを改造

先ほどのコードに .text  を中央表示するCSSを追加するだけ

もし画像だったら .img  とかに変えてください。

 

実際に表示してみたオーバーレイの見た目はこんな感じです。

CSSで作ったーオーバーレイの上に文章を表示してみた

ゲームとかソフトの使い方説明とかでよくみるタイプ

チュートリアル作成とかにも役立つかもしれません(適当)

jQueryからオーバーレイ表示を切り替えるには・・・

ここまでがCSSだけで全画面オーバーレイを実装手順

最後に蛇足的だけど、jQueryから表示切り替える方法 もまとめてみる

 

1.まずオーバーレイを隠すコードは以下

表示する時とは逆に、 z-index: -1;  でどんな要素より後ろに来るように調節

 

2.次はオーバーレイ表示するコード例

特に言うことなし

ボタン押下時にON・OFF切り替えが動的にできるようになります。

オーバーレイの作り方まとめ

まあオーバーレイといっても大層なものじゃないですが、、、

  1. オーバーレイ用の要素を作る
  2. 位置を position:absolute;  にする
  3. 奥行を z-index: 21474836479;  などにする

このポイントさえ押さえとけば、簡単に作れるはずです、

ということでCSSでの全画面オーバーレイの実装方法でした。ではまた

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください