- 締切済み
Ajaxのウィンドウ表示位置について
ページを開くとAjaxのウインドウが表示されるようになっています。 バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。 ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですが ウインドウの真ん中に出したいのですがやりかたがわかりません。 試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。 サイトがバックにある状態でウインドウを出したいのでiframe以外で ウインドウを真ん中に表示する方法はあるのでしょうか？
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
#1です。 関数はbody内でもhead内でも外部ファイルでもどこでも同じです。 #1のソースでtopとleftが取得出来ますので、例えばAjaxで表示させたいdiv要素を"hogehoge"とすると <div id="hogehoge" style="position:absolute;width:500px;height:500px;"></div> <script> document.getElementById("hogehoge").style.top = top+"px";//#1のソースで取得したtop document.getElementById("hogehoge").style.left= left+"px";//#1のソースで取得したleft </script> とすれば中央位置に幅500px,高さ500pxの疑似ウィンドウ（レイヤー）が中心位置に表示されるはずです。 質問者さんが使っているvar win = new Window({......のオブジェクトがどうなっているか分からないので、これ以上は説明出来ません。。。もしclassName要素はあるようですが、ID要素が無いようでしたらオブジェクトが表示されるレイヤーにIDを設定する必要があるかもしれませんね。 参考まで。 とすれば、
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
ウィンドウを中心に表示するには、ウィンドウの幅と高さを取得する必要がありますね。 ウィンドウサイズはIEとその他で違うので、関数を作っておきます。 function getWindowSize(type){ switch(type){ case "w": if(document.all){ return(document.body.clientWidth); }else if(window.innerWidth){ return(window.innerWidth); }else{ return false; } ;break; case "h": if(document.all){ return(document.body.clientHeight); }else if(window.innerHeight){ return(window.innerHeight); }else{ return false; }; break; default: return false; } } これでウィンドウサイズが取得出来ますので、これに合わせてtop、leftを設定すれば良いと思います。中心はそのサイズの 1/2ですし、ウィンドウの左上（top,leftで設定するポイント）はそこから開くウィンドウサイズの1/2をひいたものでしょうから、 var H = 500;//表示するウィンドウの高さ var W = 500;//幅 var top = getWindowSize("h")/2 - H/2; var left = getWindowSize("w")/2 - W/2; これでtopとleftの値を設定すれば良いと思います。
補足
お返事ありがとうございます＾＾ 応用の仕方がわからないのですがどのようなソースになるのでしょうか？ body内に <script type="text/javascript"> function getWindowSize(type){ switch(type){ case "w": if(document.all){ return(document.body.clientWidth); }else if(window.innerWidth){ return(window.innerWidth); }else{ return false; } ;break; case "h": if(document.all){ return(document.body.clientHeight); }else if(window.innerHeight){ return(window.innerHeight); }else{ return false; }; break; default: return false; } } </script> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", var top = getWindowSize("h")/2 - H/2; var left = getWindowSize("w")/2 - W/2; var W = 500; var H = 500; zIndex: 100, url: "http://www.yahoo.co.jp/", showEffectOptions: {duration:3}}) win.show(); </script> としてみたのですが何も表示されない状態です。お手数お掛けしますが教えて頂けないでしょうか？宜しくお願い致します。
補足
またまたありがとうございます。元のベースは http://e0166.blog89.fc2.com/blog-entry-203.html さんからサンプルソースをダウンロードしたものです。 javascript/window.jsの158行目～171行目のあたりのpx指定が top,leftの値を制御しているのはわかるのですが それ以外はお手上げ状態でした。 ここにウインドウサイズを取得する記述をするといいと思うのですが それができていれば質問はしないですね・・・＾＾；