Jacascript初心者です。

解決済

質問者：amcars
質問日時：2010/04/20 11:24
回答数：3件

Jacascript初心者です。

最近たまに、webページ全体が暗くなり、ウインドウがでて来るサイトが有りますよね。
あれを実現するのにjQuery等のライブラリを使えば早い事は解っているのですが、自分で一度実装して見たいと思い下記のようなスクリプトを書いてみたらそれっぽくはなったのですが、一つ問題が発生しました。
画面サイズを拡大しても当然ながら、上に被せた透明要素が連動せず、あまりよろしく有りません。。
これを解決すべく、色々考えたのですが、透明要素のサイズをfor文などを駆使して連続的に変える力技しか思い浮かびませんでした。
そこで、皆さんの力を借りたく投稿します。
//safariでのみ動作確認
function fadeWindow() {
var shadeEl = document.createElement("div");
var width = window.innerWidth;
var height = window.innerHeight;
shadeEl.id = "shade";
shadeEl.style.width = width + "px";
shadeEl.style.height = height + "px";
document.body.appendChild(shadeEl);
}

定義済みのCSS
#shade{
background-color:#000000;
position:absolute;
top:0px;
left:0px;
filter: alpha(opacity=50);
　 -moz-opacity: 0.5;
　opacity: 0.5;
}

どうぞよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2010/04/20 12:32

＞に被せた透明要素が連動せず、あまりよろしく有りません。

resizeのイベントを取得してサイズを調整してもいいけれど、わざわざそんなことしなくても、CSSでwidth:100%; height:100% みたいな指定をしておけば、自動的に対応してくれませんか？
（スクリプトからはサイズ指定しない）

関係ないけど、ご提示のスクリプトだと、IE6の場合にサイズが取得できないみたいで、エラーになっちゃいました。

- 0
- 件

通報する

この回答へのお礼

回答有り難うございます。
まったくその通りです。
CSSはそれなりに出来るつもりでしたが、javascriptに気を取られすぎました。
と、言い訳いておきます。
＞IE6の場合にサイズが取得できないみたいで、エラーになっちゃいました。
innerWidth（height）プロパティはIEでは呼び出せないようですね。

通報する

お礼日時：2010/04/20 14:57

No.3

回答者： babu_baboo
回答日時：2010/04/20 15:00

こんにちは！//ぐろーばるへんすうは、たしかにらくちんです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Test</title>

<body>
<div id="a">かすかに見える</div>

<script type="text/Javascript">
</script>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2010/04/20 12:24

＞上に被せた透明要素が連動せず、あまりよろしく有りません。

window.resizeのイベントを取得して対応してもいいけれど、そんなことしなくても、CSSの指定でwidth:100%; height:100%みたいにしておけば、自動的に修正してくれると思いますが…
（width、heightはスクリプトからは指定しない）

ご提示のスクリプトだと、ＩＥ6の場合width、heightが取得できないみたいで、エラーになっちゃいました。