※ ChatGPTを利用し、要約された質問です（原文：Jacascript初心者です。）
自作の透明要素を持つウインドウを実装する方法
このQ&Aのポイント
JavaScript初心者のため、jQuery等のライブラリを使わずにウェブページ全体を暗くし、ウインドウを表示する方法を知りたいです。
自作のスクリプトでウェブページを暗くし、ウインドウを表示しましたが、画面を拡大するとプレースホルダが連動しない問題が発生しました。
透明要素のサイズを連続的に変える力技しか思い浮かばないため、他の方法を探しています。
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;
}
どうぞよろしくお願いします。
お礼
回答有り難うございます。 まったくその通りです。 CSSはそれなりに出来るつもりでしたが、javascriptに気を取られすぎました。 と、言い訳いておきます。 ＞IE6の場合にサイズが取得できないみたいで、エラーになっちゃいました。 innerWidth（height）プロパティはIEでは呼び出せないようですね。