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


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

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

回答の条件
  • 1人3回まで
  • 登録:2006/08/24 13:04:43
  • 終了:2006/08/24 14:49:04

ベストアンサー

id:miyamuko No.5

miyamuko回答回数29ベストアンサー獲得回数112006/08/24 14:28:31

ポイント45pt

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

まず 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';
id:renmin-plus

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

2006/08/24 14:46:42

その他の回答(4件)

id:jippu No.1

jippu回答回数61ベストアンサー獲得回数42006/08/24 13:23:17

ポイント5pt

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

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

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

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

LightBox JS

iBox

id:renmin-plus

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

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

2006/08/24 13:33:25
id:himawari-san No.2

himawari-san回答回数3ベストアンサー獲得回数02006/08/24 13:25:47

ポイント5pt

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

レイヤーの使い方

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

id:renmin-plus

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

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

2006/08/24 13:33:23
id:jippu No.3

jippu回答回数61ベストアンサー獲得回数42006/08/24 13:46:00

ポイント5pt

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

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

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

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

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

id:renmin-plus

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

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

2006/08/24 13:55:51
id:jippu No.4

jippu回答回数61ベストアンサー獲得回数42006/08/24 14:21:38

ポイント40pt

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

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

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

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

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

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

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


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

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

id:renmin-plus

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

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

2006/08/24 14:34:36
id:miyamuko No.5

miyamuko回答回数29ベストアンサー獲得回数112006/08/24 14:28:31ここでベストアンサー

ポイント45pt

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

まず 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';
id:renmin-plus

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

2006/08/24 14:46:42

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません