画面をグレーアウトしてポップアップ状の画面の中身を自由にカスタマイズするには?

やりたいことはこちらのページの内容になるのですが、
http://phpspot.org/blog/archives/2006/08/glayerjs.html
自分のローカルで何回テストしても上手く動きません。
考えられる原因として
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./effects.js"></script>
<script type="text/javascript" src="./glayer.js"></script>
<link rel="stylesheet" href="./glayer.css" type="text/css" />
の、「glayer.css」と「glayer.js」を「glayer.js - グレーアウト表示ライブラリ」からダウンロードできているのですが、他の2つがいまいちどこからダウンロードするのか分っていないところと、保存方法、拡張子、などが間違っている可能性です。
どなたか初心者向けに解説してくだされば幸いです。よろしくお願い致します。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2010/09/06 15:16:58
  • 終了:2010/09/07 11:49:45

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932010/09/06 16:09:21

ポイント100pt

まず配布元のサイトをよーく観察してください。glayer.js - グレーアウト表示ライブラリ

質問文にあるリンク先は古すぎます。今回動かない原因はglayer.jsのクラスの名前がLayerからGlayerに変わっていたためだと思われます。(Layer.hide→Glayer.hide)

あとver2からprototype.jsを使わずに以下のコードだけで実現できます。

(以下のコードのhtml、glayer.css、glayer.jsを同じ場所にいれる)

なにか他に質問がありましたらコメント欄などで回答します。(現在は設定で無効になっていますが。)

<html>
<head>
<link type="text/css" rel="stylesheet" href="glayer.css" />
<script type="text/javascript" src="glayer.js"></script>
<script>
onload = function(){
  document.getElementById('btn').onclick = function(){
    Glayer.show('glayer');
  };

  document.getElementById('btn2').onclick = function(){
    Glayer.fadeIn('glayer2');
  };
}
</script>
</head>
<body>
<input type="button" id="btn" value="click!"></input>
<input type="button" id="btn2" value="click!"></input>

<div id="glayer" class="glayer" style="display: none;" onclick="Glayer.hide('glayer')">
<div style="text-align:center;width:100%;position:absolute;top:80px;">
<div style="background-color:white;width:300px;top:80px;margin:0 auto;height:100px;padding-top:30px">
メッセージをどうぞ
</div>
</div>
</div>
<div id="glayer2" class="glayer" style="display: none;" onclick="Glayer.fadeOut('glayer2')">
<div style="text-align:center;width:100%;position:absolute;top:80px;">
<div style="background-color:pink;width:300px;top:80px;margin:0 auto;height:100px;padding-top:30px">
フェードイン
</div>
</div>
</div>
</body>
</html>
id:ahsodik

Cherenkov さん

ご回答ありがとうございました!!

ローカルでテストしたところバッチリでした。(古いということにも気づきませんでした。。)

実際にサイト作っていく時にまた何か疑問が出るかもしれませんが、とりあえず解決しましたので閉めますね。もしまた何かあればハテナにてまた質問させて頂きます。ありがとうございました。

2010/09/07 11:49:04

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

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

トラックバック

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

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

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