グレーアウト表示のインタフェース
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の値をいじるコードにしてやるとうまくいった。
いまいちスッキリしないが、深追いするとひどい目に遭いそうな気がしたので、できるやり方で満足しておくことにした。
近況とか
更新頻度の失速っぷりがこのブログの死を予感させてやばいので、適当なネタでもいいから毎日更新にチャレンジしてみます。
何日続くか・・・賭けの対象にいいかもしれません。
この投稿へのコメント
はじめまして。glayer.js作者のonozatyです。
glayer.jsのご利用ありがとうございます。(^^;;
> showParallelという関数もあったのだけど、なんだかうまく動かなかった。
上記ですが、指定しているエレメントは、block要素である必要があります。
こちらで試してはおりませんが、、block要素でないと、表示位置の調整がうまくいかず、変な位置に表示されてしまうと思っております。
divならばデフォルトでblockなので問題なく表示されると思いますが、デフォルトがblockじゃないエレメント(たとえばpやspanなど)を使う場合には、akahigeさんが書いているように、JavaScriptで style.display = “block” とするか、cssでdisplay: blockを指定してお使いください。
(個人的には、スタイルの指定はなるべくcssでやっておいた方が良いと思っていますので、後者をお勧めします)
> $(‘hogehogeid’).style.zindex = 101
zindexではなくzIndex(iが大文字)だとうまく反映されるのではと思います。
こちらこそ便利なライブラリを使わせていただいてありがとうございます_(._.)_
レスまでいただいて助かります。
showParallelの対象にしたエレメントはdivでしたが、最初にCSSでdisplayをnoneにしていると駄目でした。
display無指定やblockだとうまくいきました。＠Firefox2
zindexはzIndexにしたらうまくいきました。
こういう細かい系は煮詰まってるときに追撃するとやはり被害甚大だった気がします。
ご教示いただいてほんとに助かりました。