- ベストアンサー
自作の透明要素を持つウインドウを実装する方法
- JavaScript初心者のため、jQuery等のライブラリを使わずにウェブページ全体を暗くし、ウインドウを表示する方法を知りたいです。
- 自作のスクリプトでウェブページを暗くし、ウインドウを表示しましたが、画面を拡大するとプレースホルダが連動しない問題が発生しました。
- 透明要素のサイズを連続的に変える力技しか思い浮かばないため、他の方法を探しています。
- amcars
- お礼率77% (21/27)
- JavaScript
- 回答数3
- ありがとう数9
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞に被せた透明要素が連動せず、あまりよろしく有りません。 resizeのイベントを取得してサイズを調整してもいいけれど、わざわざそんなことしなくても、CSSでwidth:100%; height:100% みたいな指定をしておけば、自動的に対応してくれませんか？ （スクリプトからはサイズ指定しない） 関係ないけど、ご提示のスクリプトだと、IE6の場合にサイズが取得できないみたいで、エラーになっちゃいました。
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
こんにちは！//ぐろーばるへんすうは、たしかにらくちんです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Test</title> <body> <div id="a">かすかに見える</div> <script type="text/Javascript"><!-- //@cc_on var wrap = document.createElement( 'div' ); var s = wrap.style; var c = document /*@if(1) [document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body'] /*@else@*/ .defaultView /*@end@*/; var o = 0; var n = 0; s.position = 'absolute'; s.top = '0px'; s.left = '0px'; s.width = /*@if(1) c.clientWidth @else@*/ c.innerWidth /*@end@*/ + 'px'; s.height = /*@if(1) c.clientHeight @else@*/ c.innerHeight /*@end@*/ + 'px'; s.backgroundColor = '#000'; document.body.appendChild( wrap ); var opacity = function ( op ) { s./*@if(1) filter = 'alpha(opacity='+ op + ')'; @else@*/ opacity = (op / 100);/*@end@*/ }; setInterval( function( ) { opacity( Math.abs( Math.cos( Math.PI * (n += 1) / 180 ) * 100 |0 ) ); }, 30); //--> </script>
- fujillin
- ベストアンサー率61% (1594/2576)
＞上に被せた透明要素が連動せず、あまりよろしく有りません。 window.resizeのイベントを取得して対応してもいいけれど、そんなことしなくても、CSSの指定でwidth:100%; height:100%みたいにしておけば、自動的に修正してくれると思いますが… （width、heightはスクリプトからは指定しない） ご提示のスクリプトだと、ＩＥ6の場合width、heightが取得できないみたいで、エラーになっちゃいました。
お礼
回答有り難うございます。 まったくその通りです。 CSSはそれなりに出来るつもりでしたが、javascriptに気を取られすぎました。 と、言い訳いておきます。 ＞IE6の場合にサイズが取得できないみたいで、エラーになっちゃいました。 innerWidth（height）プロパティはIEでは呼び出せないようですね。