人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ブラウザのウインドウの真ん中に要素を表示する方法についてです。

http://www.hemidemi.com/bookmark/info/225487

このページにある「收藏」というボタンを押したら、画面中央に「loading」という画像が一瞬表示されます。この画像をどうやって真ん中に表示しているのかよくわからないので、教えてください。このページでどういう方法が使われているのかが知りたいです。

●質問者: renmin-plus
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:ウインドウ ブラウザ ボタン 画像
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● jippu
●5ポイント

これ自体はCSSとJavaScriptで可能です。(いわゆるDHTML)

具体的には半透明なグレーのレイヤーの幅、高さを100%にして中央寄せにすればできると思います。

JavaScriptでレイヤーの表示などを行っているのだと思います。

こういった動作をするライブラリ(というか部品)もいくつか公開されているので、実装しようと思えばすぐにできるのではないでしょうか。

LightBox JS

iBox

◎質問者からの返答

ありがとうございます。基本的な知識はあります。

このページの一体どこで、topとleftを設定してるのか知りたいのです。ソースを追いかけてもよくわかりませんでした。


2 ● himawari-san
●5ポイント

Javaスクリプトでレイヤーを表示させているのだと思います。

レイヤーの使い方

http://gentzen.math.hc.keio.ac.jp/JavaScript/day11/index4.ht...

◎質問者からの返答

ありがとうございます。基本的な知識はあります。

このページの一体どこで、topとleftを設定してるのか知りたいのです。ソースを追いかけてもよくわかりませんでした。


3 ● jippu
●5ポイント

なるほど。ソースは確かに分かりにくいですね…。

このボタンではprototype.jsのAjax.Updaterを使っているようです。

その中で、ボタンクリックしたときに、busy-boxというエレメントを表示、ロードが完了したときに非表示、ということをしています。

busy-boxは、[ソース表示]で出るソース85行目から90行目付近に書かれています。

※Ajaxのライブラリを使っているので分かりにくいですね…。

◎質問者からの返答

ありがとうございます。その辺もわかるのですが、onLoading で実行しているのは Element.show() だけですよね。それで何で、ウインドウ幅に合わせていつも中央に表示されるのか、わかりません。prototype.js を書き換えてるんじゃないかと念のため見ましたが、そういうこともありませんでした。

回答可能回数を3回にしました。もしおわかりになれば、是非もう一度、回答をお願いします。


4 ● jippu
●40ポイント

回答回数増やしていただいてありがとうございます。

ソース流し読み程度見てみただけなので、ひょっとしたら間違ってるかもしれませんが、

クリック時にstartOverlay()が動きます。

その中でgetPageSize()でclientWindowの幅と高さなど取得→画面一杯に黒のオーバーレイをします。

で、createhintbox()でappendChildしているので、オーバーレイの属性を引き継いでいるのかな、と思いました。

ちなみに、幅と高さの取得はsetVals()という関数で行っています。

確信がないので、ポイントは結構です。


※ただ、ブラウザ毎に対応させようとしているのだと思うのですが、もっとスマートなやり方があるのになぁ、とか

onBoydLoad()とか、結構ソース汚いなぁ、とか思いました。

◎質問者からの返答

ありがとうございます。startOverlay() の呼び出しは onComplete だから関係ないと思います。が、関係ないので無視していた startOverlay のソースを見た結果、ついでに onBoydLoad(なんだこの名前) が目に入ったんですが、要素の中央あわせはウインドウの onload と onresize で全部やってますね。

なんか、変なかんじですが、知りたいことはわかりましたし、そのキッカケを与えて下さったので、ポイント差し上げます。ありがとうございました。


5 ● miyamuko
●45ポイント ベストアンサー

ソース流し読みなので間違っているかもしれませんが、、、

まず onBoydLoad() で以下のように busy-box のスタイルを wMarks に入れています。

 box = document.getElementById("busy-box");
 wMarks[0] = box.style;

で、wRefresh() で left と top を設定しています。

wRefresh は 200ms 毎にタイマで呼ばれているようです。

 wMarks[x].left = posX + window.pageXOffset - width + 'px';
 wMarks[x].top = posY + window.pageYOffset - height + 'px';
◎質問者からの返答

あれ、wRefreshはそういう呼ばれ方か。ピンポイントな回答ですね。ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ