IE では標準モードでないと正しく動作しません 拡張子:txtvbswsfjsphpjavahtmlutf8sjis <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP"> </head> <body> <script type="text/javascript"> function scriptTest(evt) { // ページ全体を覆う DIV の作成 window.ds = document.createElement('div'); ds.setAttribute('id','ds') ds.style.position='absolute'; ds.style.width='100%'; ds.style.height=document.getElementsByTagName("HTML")[0].scrollHeight+200+'px'; ds.style.left='0px'; ds.style.top='0px'; // IE8 までは、opacity プロパティが使えないようです var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf("msie") > -1) { ds.style.display = 'none'; ds.style.backgroundColor = '#000000'; ds.style.filter='alpha(opacity=50)'; } else { ds.style.backgroundColor = '#000000'; ds.style.opacity=.5; } // ページの最後に追加 document.body.appendChild(ds); // IEのみ後表示 if (userAgent.indexOf("msie") > -1) { ds.style.display = ''; } // ページの手前で固定位置で動かない div を作成 window.ds2 = document.createElement('div'); ds2.setAttribute('id','ds2') ds2.style.position='fixed'; ds2.style.width='400px'; ds2.style.height='200px'; ds2.style.left='100px'; ds2.style.top='100px'; ds2.style.backgroundColor = '#ffffff'; document.body.appendChild(ds2); // div 内のコンテンツ( 元の状態に戻すボタン ) ds2.innerHTML = '<INPUT type=button value="close" onclick="document.body.removeChild(ds);document.body.removeChild(ds2)">' } </script> <input type="button" value="実行" onclick='scriptTest(event);'> <br><br> <img src="http://lightbox.cocolog-nifty.com/photos/app003/twitlink_b1.jpg" galleryimg="no" style='border-style:solid;border-width:1px;border-color:#000000' alt="Twitlink_b1" /> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP"> </head> <body> <script type="text/javascript"> function scriptTest(evt) { // ページ全体を覆う DIV の作成 window.ds = document.createElement('div'); ds.setAttribute('id','ds') ds.style.position='absolute'; ds.style.width='100%'; ds.style.height=document.getElementsByTagName("HTML")[0].scrollHeight+200+'px'; ds.style.left='0px'; ds.style.top='0px'; // IE8 までは、opacity プロパティが使えないようです var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf("msie") > -1) { ds.style.display = 'none'; ds.style.backgroundColor = '#000000'; ds.style.filter='alpha(opacity=50)'; } else { ds.style.backgroundColor = '#000000'; ds.style.opacity=.5; } // ページの最後に追加 document.body.appendChild(ds); // IEのみ後表示 if (userAgent.indexOf("msie") > -1) { ds.style.display = ''; } // ページの手前で固定位置で動かない div を作成 window.ds2 = document.createElement('div'); ds2.setAttribute('id','ds2') ds2.style.position='fixed'; ds2.style.width='400px'; ds2.style.height='200px'; ds2.style.left='100px'; ds2.style.top='100px'; ds2.style.backgroundColor = '#ffffff'; document.body.appendChild(ds2); // div 内のコンテンツ( 元の状態に戻すボタン ) ds2.innerHTML = '<INPUT type=button value="close" onclick="document.body.removeChild(ds);document.body.removeChild(ds2)">' } </script> <input type="button" value="実行" onclick='scriptTest(event);'> <br><br> <img src="http://lightbox.cocolog-nifty.com/photos/app003/twitlink_b1.jpg" galleryimg="no" style='border-style:solid;border-width:1px;border-color:#000000' alt="Twitlink_b1" /> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
JavaScript : ページを半透明にして固定ウインドウを開く
