グレーアウト表示のインタフェース

2007-10-04
2011-01-08
かなり古い記事です。現在も有効な内容であるかどうか分かりませんのでご注意ください。

livedoor readerのフィード追加画面っぽいUIを作りたいなぁ、と思ってGoogle先生に聞いてみると次のページを紹介された。

glayer.js - グレーアウト表示ライブラリ - Enjoy*Study

これをインクルードして

Glayer.show();

とかすると使うととりあえずグレーアウトはさくっとできた。
あとはその上に画面を表示できればよい。

メッセージやダイアログが簡単に表示できるglayer_ex.jsと言うものが同じサイトにあったけれども、これ以外の自分で作り込んだ画面を表示するには自分で処理を書いてあげないと駄目みたいだ。

エレメントのIDを渡すとグレーアウトレイヤーの表示と一緒にエレメントを表示してくれるshowParallelという関数もあったのだけど、なんだかうまく動かなかった。

ソースを見ると

otherElements[i].style.display = '';

とあったので、たぶんスタイルの指定が問題なんだろう。
こっちのスタイルシートが悪いのかも知れない。

まあ、表示するだけなんで深く考えず、別途

$('hogehogeid').style.display = "block"

とかやっといた。

z-indexを変えるんじゃなくてdisplayを変える

上のコードを書く前に、最初はグレーの上に表示したいエレメントのz-indexを大きくすればいいかと思って

$('hogehogeid').style.zindex = 101
/* グレーのレイヤーのz-indexは100 */

とか書いてみたのだけど、なんだかうまくいかなかったので、最初からz-indexを高くしたエレメントを非表示にしておいて、displayの値をいじるコードにしてやるとうまくいった。
いまいちスッキリしないが、深追いするとひどい目に遭いそうな気がしたので、できるやり方で満足しておくことにした。

近況とか

更新頻度の失速っぷりがこのブログの死を予感させてやばいので、適当なネタでもいいから毎日更新にチャレンジしてみます。
何日続くか・・・賭けの対象にいいかもしれません。

Profile

フルスタック気味のフリーランスプログラマー。

どちらかと言うと得意はインフラ構築とサーバーサイドプログラミングですが、フロントエンドもぼちぼちやっています。

最近の興味範囲はWordPress、AWS、サーバーレス、UIデザイン。

愛車はセロー。カメラはペンタックス。旅好きです。横浜在住。