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

画面をグレーアウトしてポップアップ状の画面の中身を自由にカスタマイズするには?
やりたいことはこちらのページの内容になるのですが、
「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つがいまいちどこからダウンロードするのか分っていないところと、保存方法、拡張子、などが間違っている可能性です。
どなたか初心者向けに解説してくだされば幸いです。よろしくお願い致します。

●質問者: ahsodik
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS js いまいち カスタマイズ ダウンロード
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

まず配布元のサイトをよーく観察してください。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>
◎質問者からの返答

Cherenkov さん

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

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

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

関連質問


●質問をもっと探す●



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