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の値をいじるコードにしてやるとうまくいった。
いまいちスッキリしないが、深追いするとひどい目に遭いそうな気がしたので、できるやり方で満足しておくことにした。
近況とか
更新頻度の失速っぷりがこのブログの死を予感させてやばいので、適当なネタでもいいから毎日更新にチャレンジしてみます。
何日続くか・・・賭けの対象にいいかもしれません。
